CSS實現簡單圓角效果

目前，我們要在網頁中使用圓角效果，總是通過切圖然後嵌套很多div，用背景來實現圓角效果。對於前端開發工程師來說，圓角的確是一個讓人又愛又恨的東西，一方面顧及設計師追求的美觀效果，另一方面又不得不增添很多工作投入。無意中看到別人寫的一個用純粹css來實現的圓角效果，研究了一下發現對於那些需求比較簡單的圓角效果還是一種很好的方法。總結了一下，可以實現自適應的純css圓角效果。

首先，我們看一下一般圓角的結構：

從下圖可以明顯看出圓角和直邊的關係，其實把圓角放大之後可以看到圓角是由像素化的直邊組成的：

於是就有了css實現圓角的思路，就是通過用1px 的水平線條來堆疊出圓角，其中border和background的顏色填充來實現圓角邊框，同時設定不同的左右margin數值（以1px為基數）來實現錯位，從而整體上實現了簡單的圓角效果。

下面介紹一下代碼：

html部分（思路是“頭部+內容+底部”）：

我是內容
我是內容
我是內容
我是內容

通過<B>標籤來模組建dom結構，上中下三部分拼合形成一個圓角整體。

css樣式部分（主要是border顏色和margin數值）：

很容易看出這不是真正的圓角，沒有很好的過渡效果，只是一定程度上類比了圓角的實現原理。對於那些要求效果比較高的圓角和設計比較複雜的圓角來說不是很適用。

具體的效果如下：