婷婷中文在线,在线www天堂资源网

CSS跨瀏覽器盒陰影效果

風之飛雪 >《CSS》

2014.03.13

關注

一、無關緊要碎碎念

在web頁面的ui表現中，投影效果可以說是非常常見的一種表現效果了。例如開心網的頭像修飾效果：

然而，在CSS2的時代，我們多半使用圖片實現類似效果，或是使用CSS其他屬性模擬陰影效果，但是，現在，CSS3的崛起使得這個問題已經不再是是個問題了，本文就將展示如何實現跨瀏覽器的盒陰影效果。

二、標準方法

標準方法當然就是指使用CSS3的方法了，這個應該不少同行應該知道，參見如下代碼：

.shadow {    -moz-box-shadow: 3px 3px 4px #000;    -webkit-box-shadow: 3px 3px 4px #000;    box-shadow: 3px 3px 4px #000;}

釋義為：橫向偏移3像素，縱向偏移3像素，模糊4像素，顏色為純黑。

如果我們把含上面樣式的這個class shadow應用到圖片上，就會產生如下的效果（截自Firefox3.6）：

三、那么IE瀏覽器呢？

對于目前對CSS3支持如狗屎的孤芳自賞的IE瀏覽器怎么辦呢？box-shadow屬性對于IE瀏覽器就像是圣誕樹上的彩燈——裝飾而已。
好在IE瀏覽器有個IE shadow濾鏡，是IE瀏覽器私有的一個東西，可以模擬還湊合的盒陰影效果，使用類似于下面的代碼：

.shadow {    /* For IE 8 */    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135,         Color='#000000')";    /* For IE 5.5 - 7 */    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135,        Color='#000000');}

將shadow這個class應用到圖片上，結果如下（截自IE6瀏覽器）：

雖然效果不及Firefox，chrome等現代瀏覽器，但是還能湊合著用用。

四、樣式綜合

如下代碼：

.shadow {    -moz-box-shadow: 3px 3px 4px #000;    -webkit-box-shadow: 3px 3px 4px #000;    box-shadow: 3px 3px 4px #000;    /* For IE 8 */    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135,       Color='#000000')";    /* For IE 5.5 - 7 */    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135,        Color='#000000');}

您可以狠狠地點擊這里：跨瀏覽器盒陰影效果demo

更多CSS3屬性的跨瀏覽器支持可以查閱這里(http://css3please.com/) (css3please.com)。