程序员人生 网站导航

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

栏目:htmlcss时间:2014-04-06 23:06:24
阴影是最常用的 CSS 效果之一,CSS3 标准已经增加了阴影属性,下面讨论一下阴影在各种浏览器里的实现方法。

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/

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐