跨赏识器 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/

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!