下面的在Firefox、Google Chrome里运行很好,
-moz-box-shadow: 0 0 30px #CCC;
-webkit-box-shadow: 0 0 30px #CCC;
box-shadow: 0 0 30px #CCC;
-moz-box-shadow: 0 0 30px #CCC; 兼容Firefox 3.6
-webkit-box-shadow: 0 0 30px 兼容Google Chrome 6.0
不知道box-shadow兼容什么浏览器,在IE8、Firefox 3.6、Google Chrome 6.0没什么反应,可能用在其他浏览器上。
1,The horizontal offset of the shadow
如果值为正,阴影在box的右边;如果值为负,阴影在box的左边;
2,The vertical offset of the shadow
如果值为正,阴影在box的上面;如果值为负,阴影在box的下面;
3,The blur radius
如果值为0,阴影会很sharp,值越高,阴影越模糊;
4,Color 颜色
如果加inset,阴影会在里面。
-moz-box-shadow: inset 0 0 30px #CCC;
-webkit-box-shadow: inset 0 0 30px #CCC;
box-shadow: inset 0 0 30px #CCC;
如果设上另外一个值,阴影可以比原形小。
-moz-box-shadow: 0px 20px 10px -10px #888;
上面这些在IE8上不起作用,据说只在支持CSS3的浏览器产生效果。
在IE8上可以使用:
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=Ǝ', MakeShadow='true',
ShadowOpacity=Ɔ.20');
或者
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3
我喜欢前者,用两个模块,底下的生成一个边沿很模糊的阴影,放上第二个,这样四面都有阴影,调整上面的位置,可以控制阴影的效果。