CSS圓角框框

參考文章：CSS圓角表格問題

在 Blogger 上新增一個小工具 {HTML/Javascript} 來放置一些文字，之前使用 TABLE 語法來排版，發覺如果文字內容如有所變動的話還真是麻煩的，剛好看到上面的文章，測試了一下，還真不錯用。

<style type="text/CSS">
div#mid{margin:0px 20px;text-align:center;background:#aba;font-size:14px;}
div.rtop {display:block;background:#fff}
div.rtop div{display:block;height:1px;overflow:hidden;background:#aba}
div.r1{margin:0px 3px}
div.r2{margin:0px 2px}
div.r3{margin:0px 1px}
div.rtop div.r4 {margin:0 1px;height:1px}
</style>
<div id="mid">
  <div class="rtop">
    <div class="r1"></div>
    <div class="r2"></div>
    <div class="r3"></div>
    <div class="r4"></div>
  </div>
  <center>div + CSS 圓角矩形</center>
  <center>div + CSS 圓角矩形</center>
  <center>div + CSS 圓角矩形</center>
  <center>div + CSS 圓角矩形</center>
  <div class="rtop">
    <div class="r4"></div>
    <div class="r3"></div>
    <div class="r2"></div>
    <div class="r1"></div>
  </div>
</div>


我把其原始碼中的 p {padding:5px 10px;margin:2px;text-align:center;} 語法刪除了，改成 <center>...</center> ，以免影響到其他文章。

-------------------------以下 2008-12-05 新增-------------------------------

將 text-align:center; 加到 div#mid{...} 中，取代必須在文字前後加上 <center>...</center> 的麻煩，加完之後的片段代碼如下:

div#mid{margin:0px 20px;text-align:center;background:#aba;font-size:14px;}

-------------------------以上 2008-12-05 新增-------------------------------

綠色字串部份就是要顯示的內容。

-------------------------以下 2008-11-09 新增-------------------------------

其他參考資料：(以CSS+Javascript為主)

• CSS 圓角技術 -- 就是愛程式 (有原理解說和圖文程式碼範例)
• Nifty Corner (有完整的範例可以下載，應用上更為簡潔，還在測試如何和 Blogger 結合)
• CSS 圓角框 -- wowbox blog (網頁設計知識庫)

另外，從這裡 (怎麼樣用CSS製作可自動延展的圓角矩形？ )的討論看到有段原理的表示方式不錯，節錄如下：

原理其實不難，就是用 padding去讓區塊"縮"起來...用堆積木的方式堆出來的。
(不過當時我看到的是用 div 而不是 b 堆出來的)

圖示： (因為網頁會忽略空白，排版不易... 只作"一邊"的圖示)
    div 1 (padding-right:3px) █████████
    div 2 (padding-right:2px) ██████████
    div 3 (padding-right:1px) ███████████
    div 4 (padding-right:0px) ████████████
    div 4 (padding-right:0px) ████████████
( 兩個 div 4 是同一個 div, height:2px , 其它的 height:1px)

這樣圖形就被"畫"出來了。雖然沒用過表格的方式，不過原理應該是差不多的吧！

還有許多文章因為原理大多相似，就不多列出了。

其他參考資料：(使用貼圖的方式)

• CSS實例：無懈可擊的CSS圓角技術 (透過對齊兩張背景圖片，創建好了四個圓角。說明詳細。)
• [CSS]單圖像實現圓角，自動符合高度--[備忘] (2008-11-21新增)

網路上還有很多各類的 圓角框產生器，不在本文討論範圍，在此不列入。

-------------------------以下 2008-11-25 新增-------------------------------

原本製作出來的圓角，總感覺不夠圓，後來修改了幾個數值，總算比較像樣一點，其實也只是修改CSS內容而已，修改的內容如下：

div.r1{margin:0px 5px}
div.r2{margin:0px 3px}
div.r3{margin:0px 2px}
div.rtop div.r4 {margin:0 1px;height:2px}