純css實現圓角框是一件大家都說爛了的事件，我也寫過兩篇總結文章，為什麼還會有這篇文章呢，事情是這樣的。在我們的以前的專案中，實現圓角框往往是用背景來實現的，但是，當這些專案發布上線後，在維護過程中，有時需要新增一些新的需求，因為以前的專案中大量採用了圓角，並且這些全部採用了css sprites方式合併的圖，為了不增加更多的額外工作，並且也不想用js來新增更多的http請求，所以需要一些簡單的css方案來解決這個問題。而我的個人愛好，也喜歡採用無的方式來處理這些效果。總覺得css能完成的工作，為什麼不讓它來實現呢？
實現原理：
純css方式實現圓角框的原理在網路上已經有很多人詳細解說了，下面這個示意圖是我將其中的乙個圓角進行放大後的效果。
圖一從上面效果圖中我們可以看到其實這種圓角框是靠乙個個容器堆砌而成的，每乙個容器的寬度不同，這個寬度是由margin外邊距來實現的，如：margin:0 5px;就是左右兩側的外邊距5畫素，從上到下有5條線，其外邊距分別為5px，3px，2px，1px，依次遞減。因此根據這個原理我們可以實現簡單的html結構和樣式。
1、html結構層：
文字內容
b1~b4構成上面的左右兩個圓角結構體，而b5~b8則構建了下面左右兩個圓角結構體。而content則是內容主體，將這些全部放在乙個大的容器中，並給它的乙個類名sharp，用來設定通用的樣式。再給它疊加了乙個color1類名，這個類名用來區別不同的顏色方案，因為可能會有不同顏色的圓角框。
2、css樣式：
.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8 .b1,.b8 .b2,.b7 .b3,.b6 .b4,.b5
將每個b標籤都設定為塊狀結構，並定義其高度為1畫素，超出部分溢位隱藏。從上面樣式中我們已經看到margin值的設定，是從大到小減少的。而b1和b8的設定是一樣，已經將它們合併在一起了，同樣的原理，b2和b7、b3和b6、b4和b5都是一樣的設定。這是因為上面兩個圓和下面的兩個圓是一樣，只是順序是相對的，所以將它合併設定在一起。有利於減少css樣式**的字元大小。後面三句和第二句有點不同的地方是多設定了左右邊框的樣式，但是在這兒並沒有設定邊框的顏色，這是為什麼呢，因為這個邊框顏色是我們需要適時變化，所以將它們分離出來，在下面的**中單獨定義。
接下我們設定內容區的樣式：
.content
也是只設定左右邊框線，但是不設定顏色值，它和上面八個b標籤一起構成圓角框的外邊框輪廓。
往往在乙個頁面中存在多個圓角框，而每個圓角框有可能其邊框顏色各不相同，有沒有可能針對不同的設計製作不同的換膚方案呢，答案是有的。在我的這個應用中，可以換不同的**顏色，並且設定顏色方案也並不是一件很難的事情。下面看看我是如何將它們應用到不同的顏色的。
在上面的樣式設計中，我已經給顏色方案留下了可以擴充套件的空間。我將所有的涉及到邊框色的類名全部集中在一起，用群選擇符給它們設定乙個邊框的顏色就可以了。如下所示：
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6, .color1 .b7,.color1 .content{} .color1 .b1,.color1 .b8
注意：需要將這兩句的顏色值設定為一樣的，第二句中雖說是設定的background背景色，但它同樣是上下邊框線的顏色，這一點一定要記住。因為b1和b8並沒有設定border，但它的高度值為1px，所以用它的背景色就達到了模擬上下邊框的顏色了。 現在已經將乙個圓角框描述出來了，但是有乙個問題要注意，就是內容區的背景色，因為這兒是存載文本主體的地方。所以還需要加入下面這句話，也是群集選擇符來設定圓角內的所有背景色。
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5, .color1 .b6,.color1 .b7,.color1 .content
這兒除了b1和b8外，其它的標籤都包含進來了，並且包括content容器，將它們的背景色全部設定乙個顏色，這樣除了線框外的所有地方都成為一種顏色了。在這兒我也用到包含選擇符，給它們都加了乙個color1，這是顏色方案1的類名，依照這個原理可以設定不同的換膚方案。
好了，我們將上面的所有**集中起來，就完成乙個純css圓角框的例項模型，在原始碼中，我設定了六套顏色方案，其它的顏色方案就看你的了。
下面是原始碼演示後的截圖：
圖二為了演示效果，本模型的寬度值全部採用百分比實現的，你可以隨意伸縮寬度，看看它能否適應彈性的變化。
本模型在以下瀏覽器中完美通過：
ie5.5、ie6、ie7、ie8、ff3、tt、maxthon2.1.5、opera9.6、safari4.0、chrome2.0。
使用純CSS實現圓角邊框並完美相容
純css實現圓角框是一件大家都說爛了的事件，我也寫過兩篇總結文章，為什麼還會有這篇文章呢，事情是這樣的。在我們的以前的專案中，實現圓角框往往是用背景來實現的，但是，當這些專案發布上線後，在維護過程中，有時需要新增一些新的需求，因為以前的專案中大量採用了圓角，並且這些全部採用了css sprites方...
css實現邊框內圓角
有時我們需要乙個容器,只有在內側有圓角,而邊框或四個角在外依然保持直角的形狀,我們可以用兩個div元素來實現這種效果,具體如下 html 接天蓮葉無窮碧 映日荷花別樣紅 css部分 如下 container container div 效果如下圖所示 這種方法雖然實現了我們想要的效果,但它需要兩個元...
css用邊框實現圓角矩形
今天要做乙個圓角矩形的按鈕，於是直接找圓角矩形的css實現方式，搞了半天，雖然也實現效果了，但是很複雜，需要用很多 後來突然想到以前做過的乙個邊框效果，也是圓角矩形，於是找了出來，發現這種辦法相當簡單並且效果一點也不差，這裡簡要分享一下。關鍵部分都有注釋。html view plain copy h...