CSS3的border-radius
利用DIV+CSS生成圓角邊框，在很多情況下都會用到，目前DIV+CSS的圓角邊框，一種是利用CSS3，一種是利用布局模擬出圓角。
先說第一種，利用CSS3，前提是您的瀏覽器必須支持CSS3，F(xiàn)irefox3是支持的，我看到的很多網(wǎng)站圓角也是利用CSS3直接生成的，無非就是ie下依然顯示直角而已，讓ie固執(zhí)去吧。

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

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

不使用 border-radius 實現(xiàn)圓角
CSS3中，利用屬性 border-radius 可以很方便的設(shè)置出圓角矩形，但是在IE8及以下版本卻不支持這個屬性，為了在舊版本的瀏覽器中實現(xiàn)寬高自適應(yīng)的圓角矩形，可以采用以下三種方法。

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

使用背景圖片制作寬、高自適應(yīng)的圓角矩形，首先需要切出4個圓角圖片，然后把4個圓角圖片放在矩形的四個角上就大功告成了，這一共需要5個div標(biāo)簽，1個容器div和4個圓角背景div。是不是很好理解。

具體實現(xiàn)來說，需要注意一些細(xì)節(jié)。對于矩形容器div：

上下內(nèi)邊距的大小至少設(shè)置為圓角的高度。
position設(shè)置為相對定位。
放置內(nèi)容。
對于4個圓角背景div：

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

2.純 CSS+div 制作圓角矩形

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

這里矩形上下各需要3個高度為1px、垂直羅在一起的div才能模擬出圓角。具體實現(xiàn)如下：

第一個div就是上面圖中矩形的黑色上邊框，因為模擬的圓角半徑為3px，所以該div的左右外邊距設(shè)為3px，背景色設(shè)為黑色。
第二個div的左右外邊距設(shè)為2px，左右邊框為1px的黑線，背景色為粉色。
第三個div的左右外邊距設(shè)為1px，左右邊框為1px的黑線，背景色為粉色。
圓角矩形下面的兩個圓角是以上三個div反序排列。
矩形內(nèi)容區(qū)域的div只需要設(shè)置左右邊框和背景色即可。
具體代碼如下

此方法優(yōu)缺點分析：

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

3.使用CSS border 畫出梯形模擬圓角

通過設(shè)置border屬性，可以得到梯形和三角形，效果如下圖所示：

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

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

具體代碼如下：

最新評論