跨浏览器 CSS 阴影
阴影是最常用的 CSS 效果之一，CSS3 标准已经增加了阴影属性，下面讨论一下阴影在各种浏览器里的实现方法。
CSS3 阴影
CSS3 里使用 box-shadow 属性定义块的阴影，基本语法如下：
1 | box-shadow: 3px 3px 4px #000; |
上面的样式里，前面两个 “3px” 表示阴影在 xy 两个坐标轴上的偏移量，x轴的正方向向右，y轴正方向向下。这个坐标和我们平时用的有点出入。在 Firefox 和 Webkit 等浏览器里，为了达到最高效率，建议通过私有的 hack 实现 CSS 阴影，可以这样写：
1 2 | -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; |
CSS 阴影在 IE 浏览器里的实现
在 IE 里，我们只能通过滤镜才能实现纯 CSS 的阴影。要实现和上面的样式一样的效果，可以这样写：
1 2 3 4 | /* 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 时，我们遵循按兼容性从强到差的顺序进行整合，也就是标准代码写在最前。
1 2 3 4 5 | 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')"; |
速度沙发
抛弃IE，拒绝滤镜
其他的收下了
@万戈
好快！
ie真麻烦，希望ie9有改观
IE还要整滤镜…………就是个杯具……
呵呵，小邪要无视IE了呐 ~
IE8现在对css支持也不是很好
@万戈
现在说抛弃还为时尚早
@zwwooooo
即使IE9做得很完美我们还是要兼容一下旧版本
@evlos
无视任何一个主流浏览器都不是一个好做法
@老千
对，在CSS这方面，我觉得IE8比IE7垃圾
old man加在主题里面的阴影被我去得了，还没习惯。
下次折腾的时候在弄下。
倒是很少使用私有hack，除了圆角加了moz
阴影怎么加透明度呢
@linki97
调整浓度和颜色
to linki97 & bolo
半透明的话，加个rgba就好了，类似这样
box-shadow:5px 5px 5px rgba(0,0,0,.4); /* For Latest Opera */
-moz-box-shadow:5px 5px 5px rgba(0,0,0,.4); /* For Firefox3.6+ */
-webkit-box-shadow:5px 5px 5px rgba(0,0,0,.4); /* For Chrome5+, Safari5+ */
@ICETEA
哈，这个方法不错
哎。。滤镜，害我看到标题白白兴奋了一下
还是可以考虑的，不过针对IE的，很苦恼