|
第五種：利用私有屬性繪制圓角（FF3 only）
收錄理由：平滑無鋸齒
圖五
特點(diǎn)：
-
不用任何圖形。
-
兼容性：只能在FF3中使用，其它瀏覽器不受支持。
-
圓角半徑隨意調(diào)整
-
重用性強(qiáng)：多個(gè)圓角任意調(diào)用，只需要樣式表設(shè)置就可以。
-
圓角顏色隨意設(shè)置。
-
結(jié)構(gòu)無冗余。
-
圓角平滑無鋸齒。
缺點(diǎn)：
-
除了兼容性 有問題外，其它方面的表現(xiàn)都不錯(cuò)，這種方式應(yīng)該是最完美的方式，可惜目前只有FF3能支持這個(gè)屬性，以后CSS3后會(huì)支持這個(gè)屬性，不過這不知道要等到多少年以后。
-
同第五種圓角一樣，在處理圓弧內(nèi)的圖片背景時(shí)顯得有些有心無力。
實(shí)現(xiàn)原理：
使用FF3專用的私有屬性來畫出圓角。
只用兩種屬性就能體現(xiàn)圓滑的圓角框
-moz-border-radius:10px;/*圓角半徑*/
Border:5px red solid;/*邊框大小*/
實(shí)例演示：（請?jiān)贔F3瀏覽器下觀看，其它瀏覽器不支持）
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
第六種：無圖片腳本圓角框（js半完美解決方案）
這種方案目前應(yīng)該是比較完美的方案了。
圖六
特點(diǎn)：
-
不用任何圖形。
-
兼容性：通殺所有瀏覽器
-
圓角半徑隨意調(diào)整
-
重用性強(qiáng)：多個(gè)圓角任意調(diào)用。
-
顏色隨意設(shè)置，并且可以使用復(fù)雜的圖片做為背景，表現(xiàn)豐富。
-
結(jié)構(gòu)無冗余，只需要在容器上定義一個(gè)class或ID就可以將這個(gè)div變成圓角。
-
圓角平滑。
缺點(diǎn)：
-
客戶端禁用JS時(shí)就無圓角，不過在目前情勢下，這種情況應(yīng)該不會(huì)成為太大的問題。
實(shí)例演示：http://www.curvycorners.net/examples.php（有三個(gè)演示例子）
結(jié)語：
目前的css因?yàn)椴荒転橐粋�(gè)容器中定義多張背景圖片，造成了為了這種圓角效果而加入冗余標(biāo)簽。聽說CSS3會(huì)引入這一屬性，可能到哪時(shí)，就是圓角框統(tǒng)一的時(shí)候了。另外也聽說在CSS3中有意向加入像FF3私有屬性（-moz-border-radius）的方法，這也可以完美地解決這個(gè)問題。但在目前的情勢下，可能也只有用上面的這些方法來過渡了，強(qiáng)烈期待CSS3的到來。
總而言之：要實(shí)現(xiàn)絕對的完美圓角框在目前的形勢下基本上是不可能的，所以取名為“半完美解決方案”。
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2914994-1-1.html
本文鏈接：http://www.95time.cn/tech/web/2009/6488.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 超圓滑圓角框的半完美解決方案 [2] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 超圓滑圓角框的半完美解決方案 [3]
