css3：box-shadow

img {
　　-moz-box-shadow:2px 2px 10px 20px #06C; /*Firefox */
　　-webkit-box-shadow:2px 2px 10px 20px #06C; /*Safari and Chrome*/
　　box-shadow:2px 2px 10px 20px #06C; /*css3*/
}

属性值分别对应的是阴影类型：X轴位移；Y轴位移；阴影大小；阴影扩展(没有扩展就不写)；阴影颜色。

！这里的颜色值是十六进制颜色值，我们还可以使用RGBA值，RGBA值的好处是，它多了一个Alpha透明值，你可以控制阴影的透明度。

img{

　　box-shadow: 0 0 10px 20px rgba(0, 255, 0, .5);

　　-moz-box-shadow: 0 0 10px 20px rgba(0, 255, 0, .5);

　　-webkit-box-shadow: 0 0 10px 20px rgba(0, 255, 0, .5)

}

 

内阴影：

img{

　　-moz-box-shadow:inset 0 0 10px #06C;

　　-webkitbox-shadow:inset 0 0 10px #06C;

　　box-shadow:inset 0 0 10px #06C;

}

多重阴影效果：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;

}

使用多个阴影属性的顺序问题

当给同一个元素使用多个阴影属性时，需要注意它的顺序，最先写的阴影将显示在最顶层。比如下面这段代码，我们先写一个10px的绿色阴影，再写一个10px大小但扩展20px的阴影。结果是：绿色阴影层在黄色阴影层之上。

img{

　　box-shadow:0 0 10px green;box-shadow:0 0 10px 20px yellow

}

但如果我们把顺序调一下:

img{

　　box-shadow:0 0 10px 20px yellow,box-shadow:0 0 10px green;

}

我们将看不到后写的绿色阴影层，因为它先写且半径比较大的黄色层覆盖掉了。

转载于:https://www.cnblogs.com/pooh0x0/archive/2012/03/28/2420788.html