CSS實現跨瀏覽器兼容性的盒陰影效果

CSS實現跨瀏覽器兼容性的盒陰影效果

1、可有可無碎碎念

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

 

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

 

2、標準方法

標準方法固然就是指使用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）：

 

 

3、那麼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等現代瀏覽器，可是還能湊合着用用。

 

4、樣式綜合

以下代碼：

.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屬性的跨瀏覽器支持能夠查閱這裏(css3please.com)。

 

5、瀏覽器支持狀況

Firefox 3.5+

Safari 3+

Google Chrome

Opera 10.50

Internet Explorer 5.5