CSS陰影效果（兼容N多瀏覽器）

二、標准方法

標准方法當然就是指使用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 Chrome
• Opera 10.50
• Internet Explorer 5.5