本文探討的是前端設(shè)計(jì)種最常用的頁(yè)面圓角框效果的７種不同方法實(shí)現(xiàn)解決方案，其核心關(guān)鍵詞是“圓滑、完美、兼容、重用性、語(yǔ)義”，這些技術(shù)都是收集目前網(wǎng)絡(luò)上最流行的做法。縱觀種種方法，各有其優(yōu)勢(shì)，請(qǐng)針對(duì)不同的環(huán)境分別使用。

圓角框，因?yàn)槠錁邮奖戎苯强蚱?，所以成為設(shè)計(jì)師心中偏愛(ài)的設(shè)計(jì)元素?，F(xiàn)在的web標(biāo)準(zhǔn)下大量的網(wǎng)頁(yè)、博客都采用圓角框設(shè)計(jì)，成為一道亮麗的風(fēng)景線。

然而，就是這個(gè)圓角，卻成為了網(wǎng)頁(yè)前端人員心中永遠(yuǎn)抹之不去的陰影，對(duì)它，可以說(shuō)是又痛又愛(ài)。愛(ài)的是它的漂亮，痛的是要讓它兼容通行于各種不同的瀏覽器卻成為一個(gè)永遠(yuǎn)的神話。

讓我們來(lái)回顧一下目前網(wǎng)絡(luò)流行的都有哪些解決方案。

１，無(wú)圖片純css圓角框

收錄理由：兼容性強(qiáng)，不用圖形

[align=center][/align]

[align=center]圖一[/align]

特點(diǎn)：

1.不用任何圖形，使用很多個(gè)div容器模擬出圓角效果。

2.兼容性：通殺所有瀏覽器

缺點(diǎn)：

1.構(gòu)造這個(gè)圓角需要加入太多的無(wú)語(yǔ)義的標(biāo)簽，結(jié)構(gòu)比較冗余。

2.重用性不強(qiáng)：如果一個(gè)頁(yè)面有多個(gè)圓角，并且要實(shí)現(xiàn)不同的半徑大小，則其靈活性不夠。

3.邊框顏色雖然可以調(diào)節(jié)，但會(huì)對(duì)頁(yè)面中的結(jié)構(gòu)產(chǎn)生致命的影響，適用于色彩單一并且一個(gè)頁(yè)面中圓角應(yīng)用不多的頁(yè)面。

4.不容易實(shí)現(xiàn)圓弧內(nèi)有漸變色的圖形背景。

5.圓角框不夠圓滑，有鋸齒現(xiàn)象，適合于背景色和當(dāng)前色色差不大并且圓弧較小的網(wǎng)頁(yè)。

實(shí)現(xiàn)原理：

用很多1像素高的div容器，利用背景色和邊框色來(lái)模擬出圓角框的輪廓線。

實(shí)例演示： http://cssplay.co.uk/boxes/snazzy.html
２，無(wú)圖片純css圓角框，用特殊字符（&bull）

收錄理由：圓滑，不用圖形

[align=center][/align]

[align=center]圖二[/align]

特點(diǎn)：

1.不用任何圖形，使用特殊字符•（圓點(diǎn)）模擬出圓角。

2.兼容性：通殺所有瀏覽器

3.圓角平滑

缺點(diǎn)：

1.構(gòu)造這個(gè)圓角一樣需要加入無(wú)語(yǔ)義的標(biāo)簽，結(jié)構(gòu)冗余，同第一種一樣。

2.重用性不強(qiáng)：如果一個(gè)頁(yè)面有多個(gè)圓角，并且要實(shí)現(xiàn)不同的半徑大小，需要調(diào)整四個(gè)角圖片的定位，并且字符大小對(duì)其有影響，靈活性不夠。

3.顏色雖可調(diào)節(jié)，但要求里面的背景色和字符的顏色相同，不能做成邊框線條。適用于色彩單一并且一個(gè)頁(yè)面中圓角不是太多的頁(yè)面。

4.一樣不容易實(shí)現(xiàn)圓弧內(nèi)有漸變色的圖形背景。

實(shí)現(xiàn)原理：

用特殊字符（&bull），利用定位，截取四分之一圓模擬出圓角框的一個(gè)角圖片。

實(shí)例演示：http://cssplay.co.uk/boxes/curves.html
３，圖片圓角框

收錄理由：兼容性強(qiáng)，可以表現(xiàn)很復(fù)雜的圓角效果。

[align=center][/align]

[align=center]圖三[/align]

特點(diǎn)：

1.使用四個(gè)圓角圖形（或一個(gè)圓圖片）。

2.兼容性：通殺所有瀏覽器。

3.這是最常用的圓角框做法。

4.因?yàn)椴捎脠D片來(lái)表現(xiàn)，所以其圓角是超級(jí)平滑，無(wú)任何鋸齒現(xiàn)象。

5.表現(xiàn)豐富，適用于各種對(duì)圖片表現(xiàn)要求較高的圓角框。

缺點(diǎn)：

1.構(gòu)造這個(gè)圓角也需要加入四個(gè)標(biāo)簽來(lái)裝四張角圖片，結(jié)構(gòu)也有冗余。

2.重用性不強(qiáng)：如果一個(gè)頁(yè)面有多個(gè)圓角，并且要實(shí)現(xiàn)不同的半徑大小，則要重新制作一套圓角圖片。

3.如果對(duì)結(jié)構(gòu)的冗余沒(méi)有特別的需求，這就是超級(jí)圓滑圓角框的解決方案了。

實(shí)現(xiàn)原理：

利用九宮格原理，在一個(gè)容器的四個(gè)角加入絕對(duì)定位（或相對(duì)定位）的四張圓角圖片。

實(shí)例演示：http://cssplay.co.uk/boxes/three_cornered.html
４，利用vml繪制圓角（ie only）

收錄理由：無(wú)圖片，平滑，可加陰影邊框

[align=center]圖四[/align]

特點(diǎn)：

1.不用任何圖形。

2.兼容性：只能在ie中使用

3.圓角半徑隨意調(diào)整

4.重用性強(qiáng)：多個(gè)圓角任意調(diào)用。

5.圓角顏色隨意設(shè)置。

6.結(jié)構(gòu)無(wú)冗余。

7.圓角平滑無(wú)鋸齒。

缺點(diǎn)：

1.除了兼容性 有問(wèn)題外，其它方面的表現(xiàn)都不錯(cuò)。

2.不能在圓弧中表現(xiàn)豐富的有漸變的圖片，因?yàn)閳A弧外框是透明的。

實(shí)現(xiàn)原理：使用ie專用的vml來(lái)畫(huà)出圓角。

id=”roundbox”

class=”circle”

strokecolor=”red”

strokeweight=”2px”

arcsize=”0.08″>

注意加入引用空間：

這是兼容的用法，xmlns:v一定不能少，否則。。。

樣式表中加入這一句話：

v”:*{behavior:url(#default#vml);display:inline-block;}

arcsize為半徑

strokeweight為邊框線寬度

strokecolor為邊框線的顏色

實(shí)例演示：（請(qǐng)?jiān)趇e系列瀏覽器下查看本實(shí)例）

vml畫(huà)平滑圓角

使用ie專用的vml來(lái)畫(huà)平滑圓角框，還可以畫(huà)出陰影效果。就其圖形表現(xiàn)來(lái)說(shuō)，是非常完美的。

５，利用私有屬性繪制圓角（ff3 only）

收錄理由：平滑無(wú)鋸齒

[align=center][/align]

[align=center]圖五[/align]

特點(diǎn)：

1.不用任何圖形。

2.兼容性：只能在ff3中使用，其它瀏覽器不受支持。

3.圓角半徑隨意調(diào)整

4.重用性強(qiáng)：多個(gè)圓角任意調(diào)用，只需要樣式表設(shè)置就可以。

5.圓角顏色隨意設(shè)置。

6.結(jié)構(gòu)無(wú)冗余。

7.圓角平滑無(wú)鋸齒。

缺點(diǎn)：

1.除了兼容性 有問(wèn)題外，其它方面的表現(xiàn)都不錯(cuò)，這種方式應(yīng)該是最完美的方式，可惜目前只有ff3能支持這個(gè)屬性，以后css3后會(huì)支持這個(gè)屬性，不過(guò)這不知道要等到多少年以后。

2.同第五種圓角一樣，在處理圓弧內(nèi)的圖片背景時(shí)顯得有些有心無(wú)力。

實(shí)現(xiàn)原理：

使用ff3專用的私有屬性來(lái)畫(huà)出圓角。

只用兩種屬性就能體現(xiàn)圓滑的圓角框

-moz-border-radius:10px;/*圓角半徑*/

border:5px red solid;/*邊框大小*/

實(shí)例演示：（請(qǐng)?jiān)趂f3瀏覽器下觀看，其它瀏覽器不支持）

ff3私有屬性畫(huà)的圓角框

ff3下的圓角框兩個(gè)屬性就可以解決:

-moz-border-radius：半徑

border：邊框

６，無(wú)圖片腳本圓角框（js半完美解決方案）

這種方案目前應(yīng)該是比較完美的方案了。

[align=center]圖六[/align]

特點(diǎn)：

1.不用任何圖形。

2.兼容性：通殺所有瀏覽器

3.圓角半徑隨意調(diào)整

4.重用性強(qiáng)：多個(gè)圓角任意調(diào)用。

5.顏色隨意設(shè)置，并且可以使用復(fù)雜的圖片做為背景，表現(xiàn)豐富。

6.結(jié)構(gòu)無(wú)冗余，只需要在容器上定義一個(gè)class或id就可以將這個(gè)div變成圓角。

7.圓角平滑。

缺點(diǎn)：

1.客戶端禁用js時(shí)就無(wú)圓角，不過(guò)在目前情勢(shì)下，這種情況應(yīng)該不會(huì)成為太大的問(wèn)題。

實(shí)例演示：http://curvycorners.net/examples.php（有三個(gè)演示例子）
７，無(wú)圖片vml/canvas結(jié)合的圓角框

增補(bǔ)一種方案，結(jié)合jquery/vml/canvas的無(wú)圖片圓角框。

[align=center][/align]

[align=center]圖七[/align]

特點(diǎn)：
1.不用任何圖形。
2.兼容性：通殺所有瀏覽器
3.圓角半徑隨意調(diào)整,并且四個(gè)角可以隨意設(shè)置要不要圓角。
4.重用性強(qiáng)：多個(gè)圓角任意調(diào)用。
5.顏色隨意設(shè)置，并且可以使用復(fù)雜的圖片做為背景，表現(xiàn)豐富。
6.結(jié)構(gòu)無(wú)冗余，只需要在容器上定義一個(gè)class或id就可以了。
7.圓角平滑。
缺點(diǎn)：
1.本圓角需要用到j(luò)query庫(kù)，和一個(gè)js文件，如果在您的項(xiàng)目中已經(jīng)用到了jquery這個(gè)庫(kù)，倒還可以用得上，不然，為一個(gè)圓角加載一兩個(gè)js文件有點(diǎn)得不償失。
2.圓角在不同的瀏覽器下顯示有點(diǎn)小小的問(wèn)題.
實(shí)例演示：http://labs.parkerfox.co.uk/cornerz/
打包下載：下載demo

結(jié)語(yǔ)：目前的css因?yàn)椴荒転橐粋€(gè)容器中定義多張背景圖片，造成了為了這種圓角效果而加入冗余標(biāo)簽。聽(tīng)說(shuō)css3會(huì)引入這一屬性，可能到哪時(shí)，就是圓角框統(tǒng)一的時(shí)候了。另外也聽(tīng)說(shuō)在css3中有意向加入像ff3私有屬性（-moz-border-radius）的方法，這也可以完美地解決這個(gè)問(wèn)題。但在目前的情勢(shì)下，可能也只有用上面的這些方法來(lái)過(guò)渡了，強(qiáng)烈期待css3的到來(lái)。

總而言之：要實(shí)現(xiàn)絕對(duì)的完美圓角框在目前的形勢(shì)下基本上是不可能的，所以取名為“半完美解決方案”。

轉(zhuǎn)載博客：http://cnblogs.com/binyong