跨瀏覽器實現盒陰影(box-shadow)效果

     現在流行的設計里總是使用了大量的陰影，看看Vista、win7里誇張的box陰影，mac里的陰影比比皆是。CSS3的box-shadow屬性可以讓我們輕松實現圖層陰影效果，使我們可以不再總是依賴於使用圖片。

實現盒模型陰影的綜合代碼：

/*Internet Explorer*/
background:#fff;

/*Internet Explorer 8 */

-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=0,strength=6) 
　　　　　　  progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=90,strength=6) 
　　　　　　　progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=180,strength=6) 
　　　　　　　progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=270,strength=6)";

/*低於Internet Explorer 版本8*/

*filter: progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, direction=0, strength=6) 
　　　　　　progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, direction=90, strength=6) 
　　　　　　progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC direction=180, strength=6) 
　　　　　　progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, direction=270, strength=6);

/*標准瀏覽器*/
box-shadow:0px0px6px#CCC;

 

Shadow濾鏡必須配合background屬性一起使用，否則該濾鏡失效

在IE8中，-ms-filter是filter的別名，兩者區別是-ms-filter的屬相值必須被單引號或雙引號包圍，而filter中則不是必須，而在IE8之前的版本中，filter的屬性值必須不被單引號或雙引號包圍。

Shadow濾鏡的基本語法：

filter:Shadow(Color=color,Direction=direction,strength=strength)

1. color代表投影的底色，該數值是用英文字母來代替的， 例如投影底色是藍色的話，就應該設置color=blue。
2. direction參數是用來設置投影方向的，如果該數值是0的話，就代表垂直投影，此外該數值45度為單位，它的默認值是向左的270度。
3. strength設置或檢索以對象為基准的在運動方向上的向外擴散距離。

box-shadow的基本語法：

box-shadow:<length><length><length>||<color>

box-shadow:X軸位移 Y軸位移 陰影大小 陰影顏色

在低於Firefox4、Chrome10的瀏覽器中實現陰影效果需要添加：

-moz-box-shadow: 0px 0px 6px #CCC;

-webkit-box-shadow: 0px 0px6px #CCC;

連接：http://www.douban.com/note/232931620/