CSS圓角－基本的圓角框

序言：在我的文章《超圓滑圓角框的半完美解決方案》中已經總結了七種不同的圓角框解決方案，基本上總結完了目前網絡上比較流行的圓角框實現方案。而在我的另一篇文章《無圖片山頂角》中又是一個另類的實作方法。

純CSS實作圓角框是一件大家都說爛了的事件，我也寫過兩篇總結文章，為什麼還會有這篇文章呢，事情是這樣的。在我們的先前的專案中，實作圓角框往往是用背景圖片來實現的，但是，當這些專案發佈上線後，在維護過程中，有時需要添加一些新的需求，因為先前的專案中大量採用了圓角圖片，而這些圖片全部採用了CSS sprites方式合併的圖，為了不增加更多的額外工作，也不想用JS來添加更多的http請求，所以需要一些簡單的CSS方案來解決這個問題。而我的個人嗜好，也喜歡採用無圖片的方式來處理這些效果。總覺得CSS能完成的工作，為什麼不讓它來實現呢？

實現原理：

純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">文字內容</div>
</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類名，這個類別名稱用來區別不同的顏色方案，因為可能會有不同顏色的圓角框。