再谈box-shadow

早先,我详细地写过2篇关于 box-shadow 的文章: CSS3 box-shadow 详解(1) 以及 CSS3 box-shadow 详解(2)。但用现在的眼光来看,内容已经有些旧了。趁着这片闲言碎语,对 box-shadow 再做一些补充。

box-shadow 是我最喜欢的CSS3特性之一,它能创建凸显层次的阴影,但却还可以充当很多角色:边框/层叠/渐变/勾线,等等。当前浏览器的支持程度已经非常理想,除了IE8及以下,所有浏览器都已经更新到无前缀的支持——这跟一年前的情况很不同,那时,一些浏览器如firefox实现的 box-shadow 还存在占用空间的bug,Webkit类的模糊算法非常僵硬,随着这一年的发展这一些问题都已被克服。如今存在的问题只有两个,部分移动版浏览器的不支持,以及Opera在多阴影高模糊值时的效率低下。但相信这些问题也都能尽早解决。

之前虽然详细讲了 box-shadow 的方方面面,但唯独对IE模拟用其他引用链接一笔带过,现在做一个小补充。众所周知,IE低版本实现 box-shadow 是用滤镜的,这并不是推荐的做法:

.box-shadow{
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    background:#fff; /* for IE filter, required */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; /* For IE 8 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); /* For IE 5.5 - 7 */
}

现在这种代码已经显得太碍眼了,对于IE低版本我更倾向于放任不管:

.box-shadow{box-shadow: 3px 3px 4px #000;}

当然,总有需求需要IE8-有阴影,如果身在需求主导的环境下,借滤镜一用也算是无奈之举。使用滤镜的话,给对应box一个背景颜色是必需的,否则你会在box内部以及字体上同时看到丑陋的阴影效果。


评论加载中...

Disqus提供评论支持,如果评论长时间未加载,请飞跃长城。