相容N多瀏覽器的CSS陰影製作效果IE下類比css3中的box-shadow（陰影）

http://www.dabaoku.com/jiaocheng/wangye/css/201107279598.shtml相容N多瀏覽器的CSS陰影製作效果 時間:2011-07-27 17:59 來源:未知 作者:大寶庫 點擊:641次閱讀工具：字型：大 中 小 一、無關緊要碎碎念

在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 Chrome
• Opera 10.50
• Internet Explorer 5.5

(責任編輯：大寶庫)

--------------------------------------------------IE下類比css3中的box-shadow（陰影）

在ie下類比css3中的box-shadow（陰影）可以使用ie的Shadow（陰影）濾鏡

基本文法：filter: progid:DXImageTransform.Microsoft.Shadow(color=’顏色值’, Direction=陰影角度（數值）, Strength=陰影半徑（數值）);

注意：該濾鏡必須配合background屬性一起使用，否則該濾鏡失效。IE下類比css3中的box-shadow（陰影）代碼：

.box-shadow{

 

filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*for ie6,7,8*/

background-color: #eee;

-moz-box-shadow:2px 2px 5px #969696;/*firefox*/

-webkit-box-shadow:2px 2px 5px #969696;/*webkit*/

box-shadow:2px 2px 5px #969696;/*opera或ie9*/

}