css投影效果的兼容代碼

一、

在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');
}

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

五、瀏覽器支持情況Firefox 3.5+Safari 3+Google ChromeOpera 10.50Internet Explorer 5.5

本文由站酷網-pwdesign原創，轉載請保留此信息，多謝合作。