序言：在我的文章《超圓滑圓角框的半完美解決方案》中已經(jīng)總結了七種不同的圓角框解決方案，基本上總結完了目前網(wǎng)絡(luò )上比較流行的圓角框實(shí)現方案。而在我的另一篇文章《無(wú)圖片山頂角》中又是一個(gè)另類(lèi)的實(shí)現方法。
純CSS實(shí)現圓角框是一件大家都說(shuō)爛了的事件，我也寫(xiě)過(guò)兩篇總結文章，為什么還會(huì )有這篇文章呢，事情是這樣的。在我們的以前的項目中，實(shí)現圓角框往往是用背景圖片來(lái)實(shí)現的，但是，當這些項目發(fā)布上線(xiàn)后，在維護過(guò)程中，有時(shí)需要添加一些新的需求，因為以前的項目中大量采用了圓角圖片，并且這些圖片全部采用了CSS sprites方式合并的圖，為了不增加更多的額外工作，并且也不想用JS來(lái)添加更多的http請求，所以需要一些簡(jiǎn)單的CSS方案來(lái)解決這個(gè)問(wèn)題。而我的個(gè)人愛(ài)好，也喜歡采用無(wú)圖片的方式來(lái)處理這些效果?？傆X(jué)得CSS能完成的工作，為什么不讓它來(lái)實(shí)現呢？
實(shí)現原理：
純CSS方式實(shí)現圓角框的原理在網(wǎng)絡(luò )上已經(jīng)有很多人詳細解說(shuō)了，下面這個(gè)示意圖是我將其中的一個(gè)圓角進(jìn)行放大后的效果。
圖一
從上面效果圖中我們可以看到其實(shí)這種圓角框是靠一個(gè)個(gè)容器堆砌而成的，每一個(gè)容器的寬度不同，這個(gè)寬度是由margin外邊距來(lái)實(shí)現的，如：margin:0 5px;就是左右兩側的外邊距5像素，從上到下有5條線(xiàn)，其外邊距分別為5px，3px，2px，1px，依次遞減。因此根據這個(gè)原理我們可以實(shí)現簡(jiǎn)單的html結構和樣式。
1、Html結構層：
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樣式：代碼1.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{}{height:1px; font-size:1px; overflow:hidden; display:block;}
2.b1,.b8{}{margin:0 5px;}
3.b2,.b7{}{margin:0 3px;border-right:2px solid; border-left:2px solid;}
4.b3,.b6{}{margin:0 2px;border-right:1px solid; border-left:1px solid;}
5.b4,.b5{}{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}
將每個(gè)b標簽都設置為塊狀結構，并定義其高度為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;}
也是只設置左右邊框線(xiàn)，但是不設置顏色值，它和上面八個(gè)b標簽一起構成圓角框的外邊框輪廓。
往往在一個(gè)頁(yè)面中存在多個(gè)圓角框，而每個(gè)圓角框有可能其邊框顏色各不相同，有沒(méi)有可能針對不同的設計制作不同的換膚方案呢，答案是有的。在我的這個(gè)應用中，可以換不同的皮膚顏色，并且設置顏色方案也并不是一件很難的事情。下面看看我是如何將它們應用到不同的顏色的。
在上面的樣式設計中，我已經(jīng)給顏色方案留下了可以擴展的空間。我將所有的涉及到邊框色的類(lèi)名全部集中在一起，用群選擇符給它們設置一個(gè)邊框的顏色就可以了。如下所示：代碼1.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{}{border-color:#96C2F1;}
2.color1 .b1,.color1 .b8{}{background:#96C2F1;}
注意：需要將這兩句的顏色值設置為一樣的，第二句中雖說(shuō)是設置的background背景色，但它同樣是上下邊框線(xiàn)的顏色，這一點(diǎn)一定要記住。因為b1和b8并沒(méi)有設置border，但它的高度值為1px，所以用它的背景色就達到了模擬上下邊框的顏色了。
現在已經(jīng)將一個(gè)圓角框描述出來(lái)了，但是有一個(gè)問(wèn)題要注意，就是內容區的背景色，因為這兒是存載文字主體的地方。所以還需要加入下面這句話(huà)，也是群集選擇符來(lái)設置圓角內的所有背景色。代碼.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è)原理可以設置不同的換膚方案。
好了，我們將上面的所有代碼集中起來(lái)，就完成一個(gè)純CSS圓角框的實(shí)例模型，在源碼中，我設置了六套顏色方案，其它的顏色方案就看你的了。
下面是源碼演示后的截圖：
圖二
為了演示效果，本模型的寬度值全部采用百分比實(shí)現的，你可以隨意伸縮寬度，看看它能否適應彈性的變化。
本模型在以下瀏覽器中完美通過(guò)：
IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。
