CSS陰影詳解

核心提示：設計師常常使用一些獨特的字型效果和頁面效果，陰影是其中一個，它可以讓頁面中的文字和元素具有立體的效果，從而被突出出來。

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

h2{ background:url(sprites.png) no-repeat 0 0; font-size:0; text-indent:-9999em;...}h2#title1{background-position:0 -30px;}h2#title2{background-position:0 -60px;}....

 

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

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

可以查看 查看demo 先。

Text-shadow

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

text-shadow:[顏色 x軸 y軸 模糊半徑],[顏色 x軸 y軸 模糊半徑]...

或者

text-shadow:[x軸 y軸 模糊半徑 顏色],[x軸 y軸 模糊半徑 顏色]...

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

樣本：

h1{color:#000; background:#333; font:bold 24px/2 "微軟雅黑",Arial; <br/>text-indent:2em;<br/>text-shadow:black 2px 2px 2px; }

效果如下圖：

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

filter: Shadow(Color="black", Direction="135", Strength="2")

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

filter: dropshadow(OffX=2, OffY=2, Color="black", Positive="true");

好吧，IE總是會拖我們的後腿，不過值得一提的是，IE的這兩個濾鏡是支援多層陰影的！比如，可以這樣寫：

filter: dropshadow(OffX=2, OffY=2, Color="red", Positive="true")
dropshadow(OffX=2, OffY=2, Color="yelow", Positive="true")
dropshadow(OffX=2, OffY=2, Color="blue", Positive="true");

欲瞭解更多關於IE的這兩個濾鏡，請查看：Shadow 和 Dropshadow

讓我們看一個多層陰影的例子(這裡無視了IE)：

h1{font:bold 32px/2 Verdana, Geneva, sans-serif; color:#f39;<br/>text-shadow:1px 1px 2px rgba(0,0,0,.8), 0 0 1em rgba(255, 0, 255, 0.5), 0 0 0.2em rgba(0, 0, 255, 0.9);}<br/>

效果如圖：

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

1 2 下一頁 >全文閱讀 提示：試試"← →"鍵，翻頁更方便哦！

[1] [2]  下一頁