|
text-shadow的瀏覽器兼容性
目前text-shadow被Firefox 3.5+，Safari 1.1+/chrome 2.0+和opera 9.5支持，IE不支持。需要注意的是，Safari只有4.0才支持多層陰影。
- IE各個(gè)版本都不支持text-shadow；
- Opera 9.5+支持最多6-9層陰影，并使用CSS2渲染順序(最先定義的陰影在最下面)。而且出于性能的原因，模糊半徑被限制到100px；
- Gecko (Firefox)理論上支持無限層text-shadows (不過不建議嘗試) 并遵循新的CSS3渲染順序(最先定義的陰影在最上面)；
- Safari 1.1-3.2只支持單層text-shadow (只顯示第一個(gè)逗號(hào)之前的聲明而無視后面的)。Safari 4.0+才支持多層陰影以及新的CSS3渲染順序；
box-shadow
先來說IE，IE不支持box-shadow屬性，但是上面提到的兩個(gè)濾鏡都可以用來實(shí)現(xiàn)陰影效果。這也就是說，IE并沒有把文字陰影和盒子陰影區(qū)分！這就會(huì)出現(xiàn)一些問題：元素中的文字會(huì)繼承元素的陰影設(shè)置。但是如果你不定義該元素的background和border，就只會(huì)出現(xiàn)文字陰影，如果只定義background屬性而不定義border，就只會(huì)出現(xiàn)盒子陰影，文字不會(huì)出現(xiàn)陰影；而如果只定義了border屬性而不定義background，就即會(huì)出現(xiàn)盒子陰影，內(nèi)容文字及圖片也會(huì)出現(xiàn)陰影。有興趣的同學(xué)可以折騰一下。
好了，現(xiàn)在讓我們忘了IE，來看一看box-shadow。事實(shí)上，了解了text-shadow之后，box-shadow就很好理解了，目前只有firefox和safari/chrome通過私有屬性支持box-shadow屬性。而Opera瀏覽器雖然目前還不支持該屬性，但是在其文檔中提到下一個(gè)版本的引擎Presto 2.3（目前最新版的Opera 10.10的引擎是Presto 2.2.15）中將會(huì)支持 box-shadow，那就讓我們慢慢等待吧。
box-shadow的語法和text-shadow是一樣的。
#boxShadow{
...
-webkit-box-shadow:2px 2px 2px black;
-moz-box-shadow:2px 2px 2px black;
...
}
事實(shí)上，box-shadow和border-radius是很好的搭檔：
#boxShadow1{-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:1px solid ddd;
-webkit-box-shadow:0 0 10px black;
-moz-box-shadow:0 0 10px black;
padding:10px;}
效果如圖：
firefox在3.5版本中才開始支持box-shadow，目前對(duì)陰影的渲染還不是很完美。
總結(jié)
CSS陰影是CSS3中很有用的特性，我們已經(jīng)可以在Firefox/webkit/Opera中使用text-shadow，很快也可以在這些瀏覽器中實(shí)現(xiàn)box-shadow。唯獨(dú)IE特立獨(dú)行，還在堅(jiān)持它那蹩腳的濾鏡，這真是個(gè)杯具。
查看demo
原文：http://www.qianduan.net/css-shadow-xiangjie.html
本文鏈接：http://m.95time.cn/tech/web/2009/7254.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 CSS陰影詳解 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 2 頁 CSS陰影詳解 [2]
