7種CSS圓角框解決方案

本文探討的是前端設計種最常用的頁面圓角框效果的7種不同方法實現解決方案,其核心關鍵詞是“圓滑、完美、兼容、重用性、語義”,這些技術都是收集目前網絡上最流行的做法。縱觀種種方法,各有其優勢,請針對不同的環境分別使用。

 

圓角框,因爲其樣式比直角框漂亮,所以成爲設計師心中偏愛的設計元素。現在的web標準下大量的網頁、博客都採用圓角框設計,成爲一道亮麗的風景線。

然而,就是這個圓角,卻成爲了網頁前端人員心中永遠抹之不去的陰影,對它,可以說是又痛又愛。愛的是它的漂亮,痛的是要讓它兼容通行於各種不同的瀏覽器卻成爲一個永遠的神話。

讓我們來回顧一下目前網絡流行的都有哪些解決方案。

1,無圖片純css圓角框

收錄理由:兼容性強,不用圖形

圖一

特點:

1.不用任何圖形,使用很多個div容器模擬出圓角效果。

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

缺點:

1.構造這個圓角需要加入太多的無語義的標籤,結構比較冗餘。

2.重用性不強:如果一個頁面有多個圓角,並且要實現不同的半徑大小,則其靈活性不夠。

3.邊框顏色雖然可以調節,但會對頁面中的結構產生致命的影響,適用於色彩單一併且一個頁面中圓角應用不多的頁面。

4.不容易實現圓弧內有漸變色的圖形背景。

5.圓角框不夠圓滑,有鋸齒現象,適合於背景色和當前色色差不大並且圓弧較小的網頁。

實現原理:

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

實例演示: http://www.cssplay.co.uk/boxes/snazzy.html

2,無圖片純css圓角框,用特殊字符(&bull)

收錄理由:圓滑,不用圖形

圖二

特點:

1.不用任何圖形,使用特殊字符•(圓點)模擬出圓角。

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

3.圓角平滑

缺點:

1.構造這個圓角一樣需要加入無語義的標籤,結構冗餘,同第一種一樣。

2.重用性不強:如果一個頁面有多個圓角,並且要實現不同的半徑大小,需要調整四個角圖片的定位,並且字符大小對其有影響,靈活性不夠。

3.顏色雖可調節,但要求裏面的背景色和字符的顏色相同,不能做成邊框線條。適用於色彩單一併且一個頁面中圓角不是太多的頁面。

4.一樣不容易實現圓弧內有漸變色的圖形背景。

實現原理:

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

實例演示:http://www.cssplay.co.uk/boxes/curves.html

3,圖片圓角框

收錄理由:兼容性強,可以表現很複雜的圓角效果。

圖三

特點:

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

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

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

4.因爲採用圖片來表現,所以其圓角是超級平滑,無任何鋸齒現象。

5.表現豐富,適用於各種對圖片表現要求較高的圓角框。

缺點:

1.構造這個圓角也需要加入四個標籤來裝四張角圖片,結構也有冗餘。

2.重用性不強:如果一個頁面有多個圓角,並且要實現不同的半徑大小,則要重新制作一套圓角圖片。

3.如果對結構的冗餘沒有特別的需求,這就是超級圓滑圓角框的解決方案了。

實現原理:

利用九宮格原理,在一個容器的四個角加入絕對定位(或相對定位)的四張圓角圖片。

實例演示:http://www.cssplay.co.uk/boxes/three_cornered.html

4,利用VML繪製圓角(ie only)

收錄理由:無圖片,平滑,可加陰影邊框

圖四

特點:

1.不用任何圖形。

2.兼容性:只能在IE中使用

3.圓角半徑隨意調整

4.重用性強:多個圓角任意調用。

5.圓角顏色隨意設置。

6.結構無冗餘。

7.圓角平滑無鋸齒。

缺點:

1.除了兼容性 有問題外,其它方面的表現都不錯。

2.不能在圓弧中表現豐富的有漸變的圖片,因爲圓弧外框是透明的。

實現原理:使用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系列瀏覽器下查看本實例)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns:v xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>VML畫平滑圓角框</title> <style> v/:*{behavior:url(#default#VML);display:inline-block;} body{ background-color:#99FFFF;font-size:12px;} .circle{ height:130px; width:300px; padding-top:8px; margin:0px auto; z-index:2; margin-left:340px; } h1{border-bottom:2px red solid;font-size:12px;margin:4px;text-indent:1em;height:20px;} div{font-size:12px;padding:10px;} </style> </head> <body> <v:roundrect id="roundbox" class="circle" strokecolor="red" strokeweight="2px" arcsize="0.08"> <h1>VML畫平滑圓角</h1> <div class="t1"> 使用IE專用的VML來畫平滑圓角框,還可以畫出陰影效果。就其圖形表現來說,是非常完美的。 </div> <v:shadow on="t" color="#777" opacity="52428f" offset="1.5pt,1.5pt"/> </v:roundrect> </body> </html>

提示:你可以先修改部分代碼再運行。

5,利用私有屬性繪製圓角(FF3 only)

收錄理由:平滑無鋸齒

圖五

特點:

1.不用任何圖形。

2.兼容性:只能在FF3中使用,其它瀏覽器不受支持。

3.圓角半徑隨意調整

4.重用性強:多個圓角任意調用,只需要樣式表設置就可以。

5.圓角顏色隨意設置。

6.結構無冗餘。

7.圓角平滑無鋸齒。

缺點:

1.除了兼容性 有問題外,其它方面的表現都不錯,這種方式應該是最完美的方式,可惜目前只有FF3能支持這個屬性,以後CSS3後會支持這個屬性,不過這不知道要等到多少年以後。

2.同第五種圓角一樣,在處理圓弧內的圖片背景時顯得有些有心無力。

實現原理:

使用FF3專用的私有屬性來畫出圓角。

只用兩種屬性就能體現圓滑的圓角框

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

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

實例演示:(請在FF3瀏覽器下觀看,其它瀏覽器不支持)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>FF3下的圓角框</title> <style type="text/css"> body{background:#CCCCCC;} .round{ -moz-border-radius:20px;/*半徑*/ border:4px solid #333;/*邊框寬度*/ margin:50px auto;width:30%;height:150px;font-size:12px; } h1{border-bottom:4px #333 solid;font-size:12px;width:100%;padding:5px 0;text-indent:1em;} .context{font-size:12px;padding:10px;} </style> </head> <body> <div class="round"> <h1>FF3私有屬性畫的圓角框</h1> <div class="context"> <p>FF3下的圓角框兩個屬性就可以解決:</p> <p>-moz-border-radius:半徑</p> <p>border:邊框 </p> </div> </div> </body> </html>

提示:你可以先修改部分代碼再運行。

6,無圖片腳本圓角框(js半完美解決方案)

這種方案目前應該是比較完美的方案了。

圖六

特點:

1.不用任何圖形。

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

3.圓角半徑隨意調整

4.重用性強:多個圓角任意調用。

5.顏色隨意設置,並且可以使用複雜的圖片做爲背景,表現豐富。

6.結構無冗餘,只需要在容器上定義一個class或ID就可以將這個div變成圓角。

7.圓角平滑。

缺點:

1.客戶端禁用JS時就無圓角,不過在目前情勢下,這種情況應該不會成爲太大的問題。

實例演示:http://www.curvycorners.net/examples.php(有三個演示例子)

7,無圖片vml/canvas結合的圓角框

增補一種方案,結合jquery/vml/canvas的無圖片圓角框。

圖七

特點:
1.不用任何圖形。
2.兼容性:通殺所有瀏覽器
3.圓角半徑隨意調整,並且四個角可以隨意設置要不要圓角。
4.重用性強:多個圓角任意調用。
5.顏色隨意設置,並且可以使用複雜的圖片做爲背景,表現豐富。
6.結構無冗餘,只需要在容器上定義一個class或ID就可以了。
7.圓角平滑。
缺點:
1.本圓角需要用到jquery庫,和一個JS文件,如果在您的項目中已經用到了Jquery這個庫,倒還可以用得上,不然,爲一個圓角加載一兩個JS文件有點得不償失。
2.圓角在不同的瀏覽器下顯示有點小小的問題.
實例演示:http://labs.parkerfox.co.uk/cornerz/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章