box-shadow有六個可設值:
img{box-shadow:陰影類型 X軸位移 Y軸位移 陰影大小 陰影擴展 陰影顏色 }
當不設陰影類型時,默認為投影效果。當設為inset時,為內陰影效果。
X軸和Y軸位移不等同但類似於photoshop裡面的”角度”和”位置。
陰影大小、擴展、顏色和Photoshop裡面的都同理。
CSS代碼中只寫了box-shadow,在實際使用中,你應該把-moz-box-shadow和-webkit-shadow也寫上。你需要做的很簡,復制兩個box-shadow,在它們前面分別加上-moz-和-webkit-。img {
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
box-shadow:2px 2px 10px #06C;
}
(1). 投影,沒有位移,10px的陰影大小,沒有擴展,顏色#06C
img{box-shadow:0 0 10px #06C;}
(2). 內陰影,無位移,10px大小,沒有擴展,顏色#06C
img{box-shadow:inset 0 0 10px #06C;}
(3). 多重陰影效果
box-shadow可以同時使用多次,我們來個四色的陰影。
img{box-shadow:-10px 0 10px red, box-shadow:10px 0 10px blue,box-shadow:0 -10px 10px yellow,box-shadow:0 10px 10px green}
(4). 使用多個陰影屬性的順序問題
當給同一個元素使用多個陰影屬性時,需要注意它的順序,最先寫的陰影將顯示在最頂層。比如下面這段代碼,我們先寫一個10px的綠色陰影,再寫一個10px大小但擴展20px的陰影。結果是:綠色陰影層在黃色陰影層之上。
img{box-shadow:0 0 10px green;box-shadow:0 0 10px 20px yellow}
要注意的是在IE中,其中的box-shadow:0 0 10px 20px yellow 要改成box-shadow:0px 0px 10px 20px yellow