分享border-radius以外的CSS圓角邊框製作方法

用CSS3的border-radius屬性來製作圓角邊框相當順手,然而瀏覽器的相容問題並不是太好處理,這裡我們就來總結一下border-radius以外的CSS圓角邊框製作方法.

CSS3的border-radius
利用p+CSS產生圓角邊框，在很多情況下都會用到，目前p+CSS的圓角邊框，一種是利用CSS3，一種是利用布局類比出圓角。
先說第一種，利用CSS3，前提是您的瀏覽器必須支援CSS3，Firefox3是支援的，我看到的很多網站圓角也是利用CSS3直接產生的，無非就是ie下依然顯示直角而已，讓ie固執去吧。

利用CSS3，你可以指定4個角都是圓角，或者某一個角是圓角非常方便，代碼如下：

#round {         background-color: #000;         border: 1px solid #000;         -moz-border-radius: 10px;         -webkit-border-radius: 10px;         color:#fff;     }     #indie {         background-color: #000;         border: 1px solid #000;         -moz-border-radius-topright: 10px;         -moz-border-radius-bottomright: 10px;         -webkit-border-top-left-radius: 10px;         -webkit-border-bottom-left-radius: 10px;         color:#fff;     }

<p id="round"><h1>圓角邊框</h1></p>
<p id="indie"><h1>部分圓角</h1></p>

不使用 border-radius 實現圓角
CSS3中，利用屬性 border-radius 可以很方便的設定出圓角矩形，但是在IE8及以下版本卻不支援這個屬性，為了在舊版本的瀏覽器中實現寬高自適應的圓角矩形，可以採用以下三種方法。

1.使用背景圖片製作圓角

使用背景圖片製作寬、高自適應的圓角矩形，首先需要切出4個圓角圖片，然後把4個圓角圖片放在矩形的四個角上就大功告成了，這一共需要5個p標籤，1個容器p和4個圓角背景p。是不是很好理解。

具體實現來說，需要注意一些細節。對於矩形容器p：

上下內邊距的大小至少設定為圓角的高度。
position設定為相對定位。
放置內容。
對於4個圓角背景p：

分別設定各個圓角背景圖片。
絕對位置於容器矩形的四個角。
需要設定寬高值才能顯示背景圖片。
假設圓角圖片的寬高是5px，具體代碼如下：

<p class="content">    <p class="top-left"></p>    <p class="top-right"></p>    <p class="btm-left"></p> <p class="btm-right"></p></p>

.content {    position: relative;    padding: 5px;   }   .top-left,   .top-rightright,   .btm-left,   .btm-rightright {    position: absolute;    width: 5px;    height: 5px;   }   .top-left {    top: 0;    left: 0;    background: url(imgs/top-left.png) no-repeat top left;   }   .top-rightright {    top: 0;    rightright: 0;    background: url(imgs/top-rightright.png) no-repeat top left;   }   .btm-left {    bottombottom: 0;    left: 0;    background: url(imgs/btm-left.png) no-repeat top left;   }   .btm-rightright {    bottombottom: 0;    rightright: 0;    background: url(imgs/btm-rightright.png) no-repeat top left;   }

2.純 CSS+p 製作圓角矩形

這種方法的原理是利用像素點繪製弧線來類比圓角。簡單起見，這裡我用圓角半徑為3px的例子講解，其中圓角矩形的背景色為粉色，矩形的邊框為黑色。左上方圓角放大後如所示：

這裡矩形上下各需要3個高度為1px、垂直羅在一起的p才能類比出圓角。具體實現如下：

第一個p就是上面圖中矩形的黑色上邊框，因為類比的圓角半徑為3px，所以該p的左右外邊距設為3px，背景色設為黑色。
第二個p的左右外邊距設為2px，左右邊框為1px的黑線，背景色為粉色。
第三個p的左右外邊距設為1px，左右邊框為1px的黑線，背景色為粉色。
圓角矩形下面的兩個圓角是以上三個p反序排列。
矩形內容地區的p只需要設定左右邊框和背景色即可。
具體代碼如下

<p class="wrapper">    <p class="r1"></p> <p class="r2"></p> <p class="r3"></p> <p class="content">aaaaa</p> <p class="r3"></p> <p class="r2"></p> <p class="r1"></p></p>

.r1 {    height: 1px;    margin: 0 3px;    background-color: #111;   }   .r2 {    height: 1px;    margin: 0 2px;    background-color: #f4b4b4;    border-left: 1px solid #111;    border-right: 1px solid #111;   }   .r3 {    height: 1px;    margin: 0 1px;    background-color: #f4b4b4;    border-left: 1px solid #111;    border-right: 1px solid #111;   }   .content {    background-color: #f4b4b4;    border-left: 1px solid #111;    border-right: 1px solid #111;   }

此方法優缺點分析：

不使用背景圖片，減少了HTTP請求數。
後期維護性好，但是圓角矩形像素增加，無意義的p代碼將成倍增加。
實現的圓角矩形有局限性。
只能實現純色圓角。

3.使用CSS border 畫出梯形類比圓角

通過設定border屬性，可以得到梯形和三角形，效果如所示：

當給p的四個邊框設定比較大的寬度值時，就能得到四個梯形，如中的第一個圖案；
在此基礎上，當把p的高度值設為0後，就能得到梯形和等腰三角形了，如中的第二個圖案；
當把p的寬、高都設為0，且只設定上、左的兩個邊框時，就能得到兩個直角三角形，圖中的第三個圖案就是這種情況；
在此基礎上，把其中的一個邊框的顏色設定為透明，就能像第四個圖案一樣得到一個直角三角形。
代碼如下：

<p class="box1"></p><p class="box2"></p><p class="box3"></p><p class="box4"></p>

.box1 {    height: 20px;    width: 20px;    border-top: 20px solid red;    border-right: 20px solid green;    border-bottom: 20px solid blue;    border-left: 20px solid yellow;   }   .box2 {    height: 0;    width: 20px;    border-top: 20px solid red;    border-right: 20px solid green;    border-bottom: 20px solid blue;    border-left: 20px solid yellow;   }   .box3 {    height: 0;    width: 0;    border-top: 50px solid red;    /* border-right: 20px solid green; */ /* border-bottom: 20px solid blue; */ border-left: 50px solid yellow;   }   .box4 {    height: 0;    width: 0;    border-top: 50px solid red;    /* border-right: 20px solid green; */ /* border-bottom: 20px solid blue; */ border-left: 50px solid transparent;   }

已經知道了如何通過 border 畫出梯形了，那又該如何利用梯形類比圓角矩形呢？很簡單，只要在矩形的上面和下面各放上一個梯形，就能得到圓角矩形了。原理嘛就是利用梯形的左右兩個斜邊類比圓角啦，直接上：

具體代碼如下：

<p class="wrapper">    <p class="top"></p> <p class="content">     <p>利用border畫出梯形，類比圓角</p> </p> <p class="bottom"></p></p>

p {    box-sizing: border-box;   }   .top {    height: 0;    border-top: 3px solid transparent;    border-bottom: 3px solid #111;    border-left: 3px solid transparent;    border-right: 3px solid transparent;   }   .bottombottom {    height: 0;    border-top: 3px solid #111;    border-bottom: 3px solid transparent;    border-left: 3px solid transparent;    border-right: 3px solid transparent;   }   .content {    color: #fff;    background-color: #111;   }   .wrapper {    width: 200px;    margin: 0 auto;   }