服務(wù)熱線
153 8323 9821
咨詢熱線 ：
15383239821
前不久做項目，要用到大量的頁面圓角的框塊，以前實現(xiàn)的時候都是用圖片做背景之類的方法，那種方法對于少數(shù)的還是比較可行的，但是當(dāng)涉及到整個項目都要用 到這樣的效果時就顯得不夠優(yōu)化和簡練了。
所以我就想用一個既方便調(diào)用又方便更新的方法來實現(xiàn)，結(jié)果如愿以償。先將此技術(shù)點總結(jié)如下：
在此之前我也尋找過目前網(wǎng)絡(luò)上最流行的做法的實現(xiàn)方案，大體共總結(jié)出7種方法，但是發(fā)現(xiàn)他們的方法多多少少都存在缺陷，后來我自己做出了我自己覺得滿意的方法。
先看目前網(wǎng)絡(luò)上最流行的7種做法：
１，無圖片純css圓角框
收錄理由：兼容性強，不用圖形
圖一
特點：
1.不用任何圖形，使用很多個div容器模擬出圓角效果。
2.兼容性：通殺所有瀏覽器
缺點：
1.構(gòu)造這個圓角需要加入太多的無語義的標簽，結(jié)構(gòu)比較冗余。
2.重用性不強：如果一個頁面有多個圓角，并且要實現(xiàn)不同的半徑大小，則其靈活性不夠。
3.邊框顏色雖然可以調(diào)節(jié)，但會對頁面中的結(jié)構(gòu)產(chǎn)生致命的影響，適用于色彩單一并且一個頁面中圓角應(yīng)用不多的頁面。
4.不容易實現(xiàn)圓弧內(nèi)有漸變色的圖形背景。
5.圓角框不夠圓滑，有鋸齒現(xiàn)象，適合于背景色和當(dāng)前色色差不大并且圓弧較小的網(wǎng)頁。
實現(xiàn)原理：
用很多1像素高的div容器，利用背景色和邊框色來模擬出圓角框的輪廓線。
實例演示： http://www.cssplay.co.uk/boxes/snazzy.html
２，無圖片純css圓角框，用特殊字符（&bull）
收錄理由：圓滑，不用圖形
圖二
特點：
1.不用任何圖形，使用特殊字符•（圓點）模擬出圓角。
2.兼容性：通殺所有瀏覽器
3.圓角平滑
缺點：
1.構(gòu)造這個圓角一樣需要加入無語義的標簽，結(jié)構(gòu)冗余，同第一種一樣。
2.重用性不強：如果一個頁面有多個圓角，并且要實現(xiàn)不同的半徑大小，需要調(diào)整四個角圖片的定位，并且字符大小對其有影響，靈活性不夠。
3.顏色雖可調(diào)節(jié)，但要求里面的背景色和字符的顏色相同，不能做成邊框線條。適用于色彩單一并且一個頁面中圓角不是太多的頁面。
4.一樣不容易實現(xiàn)圓弧內(nèi)有漸變色的圖形背景。
實現(xiàn)原理：
用特殊字符（&bull），利用定位，截取四分之一圓模擬出圓角框的一個角圖片。
實例演示：http://www.cssplay.co.uk/boxes/curves.html
３，圖片圓角框
收錄理由：兼容性強，可以表現(xiàn)很復(fù)雜的圓角效果。
圖三
特點：
1.使用四個圓角圖形（或一個圓圖片）。
2.兼容性：通殺所有瀏覽器。
3.這是最常用的圓角框做法。
4.因為采用圖片來表現(xiàn)，所以其圓角是超級平滑，無任何鋸齒現(xiàn)象。
5.表現(xiàn)豐富，適用于各種對圖片表現(xiàn)要求較高的圓角框。
缺點：
1.構(gòu)造這個圓角也需要加入四個標簽來裝四張角圖片，結(jié)構(gòu)也有冗余。
2.重用性不強：如果一個頁面有多個圓角，并且要實現(xiàn)不同的半徑大小，則要重新制作一套圓角圖片。
3.如果對結(jié)構(gòu)的冗余沒有特別的需求，這就是超級圓滑圓角框的解決方案了。
實現(xiàn)原理：
利用九宮格原理，在一個容器的四個角加入絕對定位（或相對定位）的四張圓角圖片。
實例演示：http://www.cssplay.co.uk/boxes/three_cornered.html
４，利用VML繪制圓角（ie only）
收錄理由：無圖片，平滑，可加陰影邊框
圖四
特點：
1.不用任何圖形。
2.兼容性：只能在IE中使用
3.圓角半徑隨意調(diào)整
4.重用性強：多個圓角任意調(diào)用。
5.圓角顏色隨意設(shè)置。
6.結(jié)構(gòu)無冗余。
7.圓角平滑無鋸齒。
缺點：
1.除了兼容性 有問題外，其它方面的表現(xiàn)都不錯。
2.不能在圓弧中表現(xiàn)豐富的有漸變的圖片，因為圓弧外框是透明的。
實現(xiàn)原理：使用IE專用的VML來畫出圓角。
<v:roundrect
id=”roundbox”
class=”circle”
strokecolor=”red”
strokeweight=”2px”
arcsize=”0.08″>
</ v:roundrect >
注意加入引用空間：
<html xmlns:v xmlns=”http://www.w3.org/1999/xhtml”>這是兼容的用法，xmlns:v一定不能少，否則。。。
樣式表中加入這一句話：
v”:*{behavior:url(#default#VML);display:inline-block;}
Arcsize為半徑
Strokeweight為邊框線寬度
Strokecolor為邊框線的顏色
實例演示：（請在IE系列瀏覽器下查看本實例）
５，利用私有屬性繪制圓角（FF3 only） 圖五 特點： 1.不用任何圖形。 2.兼容性：只能在FF3中使用，其它瀏覽器不受支持。 3.圓角半徑隨意調(diào)整 4.重用性強：多個圓角任意調(diào)用，只需要樣式表設(shè)置就可以。 5.圓角顏色隨意設(shè)置。 6.結(jié)構(gòu)無冗余。 7.圓角平滑無鋸齒。 缺點： 1.除了兼容性 有問題外，其它方面的表現(xiàn)都不錯，這種方式應(yīng)該是最完美的方式，可惜目前只有FF3能支持這個屬性，以后CSS3后會支持這個屬性，不過這不知道要等到多少年以后。 2.同第五種圓角一樣，在處理圓弧內(nèi)的圖片背景時顯得有些有心無力。 實現(xiàn)原理： 使用FF3專用的私有屬性來畫出圓角。 只用兩種屬性就能體現(xiàn)圓滑的圓角框 -moz-border-radius:10px; Border:5px red solid; 實例演示：（請在FF3瀏覽器下觀看，其它瀏覽器不支持） -moz-border-radius：半徑 border：邊框 ６，無圖片腳本圓角框（js半完美解決方案） 圖六 特點： 1.不用任何圖形。 2.兼容性：通殺所有瀏覽器 3.圓角半徑隨意調(diào)整 4.重用性強：多個圓角任意調(diào)用。 5.顏色隨意設(shè)置，并且可以使用復(fù)雜的圖片做為背景，表現(xiàn)豐富。 6.結(jié)構(gòu)無冗余，只需要在容器上定義一個class或ID就可以將這個div變成圓角。 7.圓角平滑。 缺點： 1.客戶端禁用JS時就無圓角，不過在目前情勢下，這種情況應(yīng)該不會成為太大的問題。 實例演示：
VML畫平滑圓角使用IE專用的VML來畫平滑圓角框，還可以畫出陰影效果。就其圖形表現(xiàn)來說，是非常完美的。
收錄理由：平滑無鋸齒
FF3私有屬性畫的圓角框FF3下的圓角框兩個屬性就可以解決:
這種方案目前應(yīng)該是比較完美的方案了。該文章由石家莊網(wǎng)站建設(shè)
上一篇：jQuery技巧大全
