CSS 中的box-shadow

CSS 中的box-shadow

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