武林網(www.49028c.com)文章簡介：CSS陰影詳解.

設計師常常使用一些獨特的字體效果和頁面效果，陰影是其中一個，它可以讓頁面中的文字和元素具有立體的效果，從而被突出出來。傳統的方法我們可能常常需要將文字切出來，直接使用圖片，如果考慮SEO和網站性能，還可能會使用CSS Sprites等技術將圖片整合，比如：

1234h2...}h2h2....

這是很棘手的事情，拼合圖片會花掉你的大量時間，而且為了實現更好視覺效果，你可能還要使用高質量的32位png圖片，這又要讓你面對該死的IE 6的png透明問題！

事實上，對于文字的陰影效果，我們完全可以用CSS來實現！

可以查看查看demo先。

text-shadow可以讓我們實現完美的文字陰影效果。基本寫法：

顏色 x軸 y軸 模糊半徑顏色 x軸 y軸 模糊半徑]...

或者

x軸 y軸 模糊半徑 顏色x軸 y軸 模糊半徑 顏色]...

這里的顏色就是陰影的顏色，你可以將顏色寫在前面，也可以寫在最后。x軸和y軸分別是其陰影的偏移位置，模糊半徑可以理解為陰影長度。而且現在大部分瀏覽器都支持多層陰影，你可以用逗號分開多組設置(當然也可以只是用單個設置)。

示例：

h1/Arial

效果如下圖：

該屬性目前被除IE之外的大部分瀏覽器支持，對于IE，我們可以使用shadow濾鏡來實現：

filterDirectionStrength

你可能已經注意到，使用shadow濾鏡只能定義角度 direction，而不能定義xy軸，z軸也被換成了strength。注意，使用該濾鏡的時候，不能夠設置背景顏色，否則濾鏡將無效！另外如果你的數學不是很好，不太懂三角函數的算法，你可以使用IE的另外一個濾鏡：dropshadow：

filterOffYColorPositive

好吧，IE總是會拖我們的后腿的，不過值得一提的是，IE的這兩個濾鏡是支持多層陰影的！比如，可以這樣寫：欲了解更多關于IE的這兩個濾鏡，請查看：Shadow 和 Dropshadow

讓我們看一個多層陰影的例子：

h1/rgba.8rgbargba

效果如圖：

這里我們使用到了rgba色彩，它是一種在CSS中同時聲明顏色及其透明度的一種方法，且被大多數A級瀏覽器支持的色彩屬性（除了IE），了解更多請訪問：《RGBa色彩的瀏覽器支持》——同時我們推薦對于純色半透明的情況使用這種簡單的寫法。

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

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

好了，現在讓我們忘了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-moz-box-shadow...}

事實上，box-shadow和border-radius是很好的搭檔：

-webkit-border-radiusborder-radiusddd;-webkit-box-shadow-moz-box-shadow

效果如圖：

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

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