武林網(www.survivalescaperooms.com)文章簡介：純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類名，這個類名用來區別不同的顏色方案，因為可能會有不同顏色的圓角框。