分享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">

圓角邊框

 

部分圓角

> ; 
 

不使用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;   
}

以上是分享border-radius以外的CSS圓角邊框製作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！