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

2、CSS樣式：
 

 

.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px; font-size:1px; overflow:hidden; display:block;}

.b1,.b8{margin:0 5px;}

.b2,.b7{margin:0 3px;border-right:2px solid; border-left:2px solid;}

.b3,.b6{margin:0 2px;border-right:1px solid; border-left:1px solid;}

.b4,.b5{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}

將每個(gè)標簽都設置為塊狀結構，并定義其高度為1像素，超出部分溢出隱藏。
從上面樣式中我們已經(jīng)看到margin值的設置，是從大到小減少的。而b1和b8的設置是一樣，已經(jīng)將它們合并在一起了，同樣的原理，b2和b7、b3和b6、b4和b5都是一樣的設置。這是因為上面兩個(gè)圓和下面的兩個(gè)圓是一樣，只是順序是相對的，所以將它合并設置在一起。有利于減少CSS樣式代碼的字符大小。后面三句和第二句有點(diǎn)不同的地方是多設置了左右邊框的樣式，但是在這兒并沒(méi)有設置邊框的顏色，這是為什么呢，因為這個(gè)邊框顏色是我們需要適時(shí)變化，所以將它們分離出來(lái)，在下面的代碼中單獨定義。
 

.content {border-right:1px solid;border-left:1px solid;overflow:hidden;}

 

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

.color1 .b1,.color1 .b8{background:#96C2F1;}
 

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

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

這兒除了b1和b8外，其它的標簽都包含進(jìn)來(lái)了，并且包括content容器，將它們的背景色全部設置一個(gè)顏色，這樣除了線(xiàn)框外的所有地方都成為一種顏色了。在這兒我也用到包含選擇符，給它們都加了一個(gè)color1，這是顏色方案1的類(lèi)名，依照這個(gè)原理可以設置不同的換膚方案

完整例子: