原文：基本的圓角框
實現原理：
純CSS方式實現圓角框的原理在網路上已經有很多人詳細解說了，下面這個示意圖是我將其中的一個圓角進行放大後的效果。

從上面效果圖中我們可以看到其實這種圓角框是靠一個個容器堆砌而成的，每一個容器的寬度不同，這個寬度是由margin外邊距來實現的，如：margin:0 5px;就是左右兩側的外邊距5畫素，從上到下有5條線，其外邊距分別為5px，3px，2px，1px，依次遞減。因此根據這個原理我們可以實現簡單的html結構和樣式。

1、Html結構層：

<div class="sharp color1">
    <b class="b1"
 
></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
    <div class="content">
        <p>number 1</p>
    </div>
    <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b
 
>
</div>

b1~b4構成上面的左右兩個圓角結構體，而b5~b8則構建了下面左右兩個圓角結構體。而content則是內容主體，將這些全部放在一個大的容器中，並給它的一個類名sharp，用來設定通用的樣式。再給它疊加了一個color1類名，這個類名用來區別不同的顏色方案，因為可能會有不同顏色的圓角框。

2、CSS樣式：

<style>
    .sharp{width:20%;margin:0 auto;}
    .content{height:180px;}
    .b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{display:block;height
 
:1px;font-size:1px;overflow:hidden;}
    .b1,.b8{margin:0 5px;}
    .b2,.b7{margin:0 3px;border-left:2px solid;border-right:2px solid;}
    .b3,.b6{margin:0 2px;border-left:1px solid;border-right:1px solid;}
    .b4,.b5{margin:0 1px;border-left:1px solid;border-right:1px solid;height:2px;}
    .content{border-right:1px solid;border-left:1px solid;overflow:hidden;}
    .b2,.b3,.b4,.b5,.b6,.b7,.content{border-color:#96C2F1;}
    .b1,.b8{background:#96C2F1;}
    .b2,.b3,.b4,.b5,.b6,.b7,.content{background:#EFF7FF;}
</style>

將每個b標籤都設定為塊狀結構，並定義其高度為1畫素，超出部分溢位隱藏。從上面樣式中我們已經看到margin值的設定，是從大到小減少的。而b1和b8的設定是一樣，已經將它們合併在一起了，同樣的原理，b2和b7、b3和b6、b4和b5都是一樣的設定。這是因為上面兩個圓和下面的兩個圓是一樣，只是順序是相對的，所以將它合併設定在一起。有利於減少CSS樣式程式碼的字元大小。後面三句和第二句有點不同的地方是多設定了左右邊框的樣式，但是在這兒並沒有設定邊框的顏色，這是為什麼呢，因為這個邊框顏色是我們需要適時變化，所以將它們分離出來，在下面的程式碼中單獨定義。
也是隻設定左右邊框線，但是不設定顏色值，它和上面八個b標籤一起構成圓角框的外邊框輪廓。

.b2,.b3,.b4,.b5,.b6,.b7,.content{border-color:#96C2F1;}
.b1,.b8{background:#96C2F1;}

注意：需要將這兩句的顏色值設定為一樣的，第二句中雖說是設定的background背景色，但它同樣是上下邊框線的顏色，這一點一定要記住。因為b1和b8並沒有設定border，但它的高度值為1px，所以用它的背景色就達到了模擬上下邊框的顏色了。

現在已經將一個圓角框描述出來了，但是有一個問題要注意，就是內容區的背景色，因為這兒是存載文字主體的地方。所以還需要加入下面這句話，也是群集選擇符來設定圓角內的所有背景色。

.b2,.b3,.b4,.b5,.b6,.b7,.content{background:#EFF7FF;}

這兒除了b1和b8外，其它的標籤都包含進來了，並且包括content容器，將它們的背景色全部設定一個顏色，這樣除了線框外的所有地方都成為一種顏色了。

如圖：