CSS實現文字陰影

摘自：http://ce.sysu.edu.cn/hope/Item.aspx?id=13402

 

 

 

設計師常常使用一些獨特的字型效果和頁面效果，陰影是其中一個，它可以讓頁面中的文字和元素具有立體的效果，從而被突出出來。比如對於文字陰影，傳統的方法可能需要將文字切出來，直接使用圖片，如果考慮SEO和網站效能，還可能會使用CSS Sprites等技術將圖片整合。拼合圖片會花掉你的大量時間，而且為了實現更好視覺效果，你可能還要使用高品質的32位png圖片，這又要讓你面對該死的IE 6的png透明問題！
　　
　　事實上，對於文字的陰影製作效果，我們完全可以用CSS來實現！
　　
　　Text-shadow
　　
　　text-shadow可以讓我們實現完美的文字陰影製作效果。基本寫法：
　　
　　text-shadow:[顏色 x軸 y軸 模糊半徑],[顏色 x軸 y軸 模糊半徑]...
　　
　　或者
　　
　　text-shadow:[x軸 y軸 模糊半徑 顏色],[x軸 y軸 模糊半徑 顏色]...
　　
　　這裡的顏色就是陰影的顏色，你可以將顏色寫在前面，也可以寫在最後。x軸和y軸分別是其陰影的位移位置，模糊半徑可以理解為陰影長度。而且現在大部分瀏覽器都支援多層陰影，你可以用逗號分開多組設定(當然也可以只是用單個設定)。
　　
　　該屬性目前被除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');
　　
　　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渲染順序；