编程笔记-- Coolder.com

用CSS制作阴影效果(兼容IE、Firefox、Google Chrome)

米娅 2010年10月12日 14:38:38

下面的在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

我喜欢前者，用两个模块，底下的生成一个边沿很模糊的阴影，放上第二个，这样四面都有阴影，调整上面的位置，可以控制阴影的效果。

2楼 2010年10月12日 15:17:42 米娅

如果使用Firefox或Google Chrome，应该看到这个方框的阴影

第1页共1页