|
第三種：圖片圓角框
收錄理由：兼容性強(qiáng)，可以表現(xiàn)很復(fù)雜的圓角效果。
圖三
特點(diǎn)：
- 使用四個(gè)圓角圖形（或一個(gè)圓圖片）。
- 兼容性：通殺所有瀏覽器。
- 這是最常用的圓角框做法。
- 因?yàn)椴捎脠D片來表現(xiàn)，所以其圓角是超級(jí)平滑，無任何鋸齒現(xiàn)象。
- 表現(xiàn)豐富，適用于各種對(duì)圖片表現(xiàn)要求較高的圓角框。
缺點(diǎn)：
- 構(gòu)造這個(gè)圓角也需要加入四個(gè)標(biāo)簽來裝四張角圖片，結(jié)構(gòu)也有冗余。
- 重用性不強(qiáng)：如果一個(gè)頁面有多個(gè)圓角，并且要實(shí)現(xiàn)不同的半徑大小，則要重新制作一套圓角圖片。
- 如果對(duì)結(jié)構(gòu)的冗余沒有特別的需求，這就是超級(jí)圓滑圓角框的解決方案了。
實(shí)現(xiàn)原理：
利用九宮格原理，在一個(gè)容器的四個(gè)角加入絕對(duì)定位（或相對(duì)定位）的四張圓角圖片。
實(shí)例演示：http://www.cssplay.co.uk/boxes/three_cornered.html
第四種：利用VML繪制圓角（ie only）
收錄理由：無圖片，平滑，可加陰影邊框
圖四
特點(diǎn)：
- 不用任何圖形。
- 兼容性：只能在IE中使用
- 圓角半徑隨意調(diào)整
- 重用性強(qiáng)：多個(gè)圓角任意調(diào)用。
- 圓角顏色隨意設(shè)置。
- 結(jié)構(gòu)無冗余。
- 圓角平滑無鋸齒。
缺點(diǎn)：
- 除了兼容性 有問題外，其它方面的表現(xiàn)都不錯(cuò)。
- 不能在圓弧中表現(xiàn)豐富的有漸變的圖片，因?yàn)閳A弧外框是透明的。
實(shí)現(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為邊框線的顏色
實(shí)例演示：（請(qǐng)?jiān)贗E系列瀏覽器下查看本實(shí)例)
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 超圓滑圓角框的半完美解決方案 [1] 下一頁 超圓滑圓角框的半完美解決方案 [3]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 2 頁 超圓滑圓角框的半完美解決方案 [2]
