亚洲欧洲国产欧美一区精品,激情五月亚洲色五月,最新精品国偷自产在线婷婷,欧美婷婷丁香五月天社区

　　text-shadow的瀏覽器兼容性

　　目前text-shadow被Firefox 3.5+，Safari 1.1+/chrome 2.0+和opera 9.5支持，IE不支持。需要注意的是，Safari只有4.0才支持多層陰影。

　　IE各個版本都不支持text-shadow;

　　Opera 9.5+支持最多6-9層陰影，并使用CSS2渲染順序(最先定義的陰影在最下面)。而且出于性能的原因，模糊半徑被限制到100px;

　　Gecko (Firefox)理論上支持無限層text-shadows (不過不建議嘗試) 并遵循新的CSS3渲染順序(最先定義的陰影在最上面);

　　Safari 1.1-3.2只支持單層text-shadow (只顯示第一個逗號之前的聲明而無視后面的)。Safari 4.0+才支持多層陰影以及新的CSS3渲染順序;

　　box-shadow

　　先來說IE，IE不支持box-shadow屬性，但是上面提到的兩個濾鏡都可以用來實現(xiàn)陰影效果。這也就是說，IE并沒有把文字陰影和盒子陰影區(qū)分!這就會出現(xiàn)一些問題：元素中的文字會繼承元素的陰影設(shè)置。但是如果你不定義該元素的background和border，就只會出現(xiàn)文字陰影，如果只定義background屬性而不定義border，就只會出現(xiàn)盒子陰影，文字不會出現(xiàn)陰影;而如果只定義了border屬性而不定義background，就即會出現(xiàn)盒子陰影，內(nèi)容文字及圖片也會出現(xiàn)陰影。有興趣的同學(xué)可以折騰一下。

　　好了，現(xiàn)在讓我們忘了IE，來看一看box-shadow。事實上，了解了text-shadow之后，box-shadow就很好理解了，目前只有firefox和safari/chrome通過私有屬性支持box-shadow屬性。而Opera瀏覽器雖然目前還不支持該屬性，但是在其文檔中提到下一個版本的引擎Presto 2.3(目前最新版的Opera 10.10的引擎是Presto 2.2.15)中將會支持 box-shadow，那就讓我們慢慢等待吧。

　　box-shadow的語法和text-shadow是一樣的。

　　#boxShadow{

...

-webkit-box-shadow:2px 2px 2px black;

-moz-box-shadow:2px 2px 2px black;

...

}

　　事實上，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;

　　效果如圖：

　　firefox在3.5版本中才開始支持box-shadow，目前對陰影的渲染還不是很完美。

　　總結(jié)

　　CSS陰影是CSS3中很有用的特性，我們已經(jīng)可以在Firefox/webkit/Opera中使用text-shadow，很快也可以在這些瀏覽器中實現(xiàn)box-shadow。唯獨IE特立獨行，還在堅持它那蹩腳的濾鏡，這真是個杯具。