跨浏览器 CSS 阴影的实现方法

CSS3 阴影

CSS3 里使用 box-shadow 属性定义块的阴影，基本语法如下：

box-shadow: 3px 3px 4px #000;

上面的样式里，前面两个 “3px” 表示阴影在 xy 两个坐标轴上的偏移量，x轴的正方向向右，y轴正方向向下。这个坐标和我们平时用的有点出入。在 Firefox 和 Webkit 等浏览器里，为了达到最高效率，建议通过私有的 hack 实现 CSS 阴影，可以这样写：

-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;

CSS 阴影在 IE 浏览器里的实现

在 IE 里，我们只能通过滤镜才能实现纯 CSS 的阴影。要实现和上面的样式一样的效果，可以这样写：

/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";

在 IE 的 shadow 滤镜里， Strength 表示阴影的浓度， Direction 表示阴影的角度，为了方便理解，我们可以理解为光线从极坐标 135° 的方向照下来，产生阴影。

整合代码

整合同一个效果的 hack 时，我们遵循按兼容性从强到差的顺序进行整合，也就是标准代码写在最前。

box-shadow: 3px 3px 4px #000;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";

原文地址：http://blog.imbolo.com/cross-browsers-css-shadow/

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠