Page 122 - css揭秘

解决方案

滤镜效果规范（http://w3.org/TR/filter-effects）为这个问题提供了一个解
决方案。它引入了一个叫作 filter 的新属性，这个属性也是从 SVG 那里借
鉴过来的。尽管 CSS 滤镜基本上就是 SVG 滤镜，但我们并不需要掌握任何
SVG 知识。相反，只需要一些函数就可以很方便地指定滤镜效果了，比如 不完全支持
blur()、grayscale() 以及我们需要的 drop-shadow() ！如果你喜欢，甚
至可以把多个滤镜串连起来，只要用空格把它们分隔开就可以了，比如：

filter: blur() grayscale() drop-shadow();

drop-shadow() 滤镜可接受的参数基本上跟 box-shadow 属性是一样
的，但不包括扩张半径，不包括 inset 关键字，也不支持逗号分割的多层投
影语法。举个例子，上面的投影：

box-shadow: 2px 2px 10px rgba(0,0,0,.5);

可以这样来写：

filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));

在图 4-7 中，你可以看这个 drop-shadow() 滤镜应用到图 4-6 中那些 !
这两个属性所用的模糊算法
元素上的效果。 可能不同，因此你可能需要调整
模糊参数！
图 4-7
drop-shadow() 滤镜应用到图 4-6
中那些元素上的效果

CSS 滤镜最大的好处在于，它们可以平稳退化：当浏览器不支持时，不
会出现问题，只不过没有任何效果而已。如果你确实需要这个效果在尽可
能多的浏览器中显示出来，可以同时附上一个 SVG 滤镜，这样可以得到稍
微好一些的浏览器支持度。你可以在滤镜效果规范（http://www.w3.org/TR/
filter-effects/）中为每个滤镜函数找到对应的 SVG 滤镜版本。你可以把 SVG
滤镜和简化的 CSS 滤镜放在一起使用，让层叠机制来决定哪一行最终生效：

filter: url(drop-shadow.svg#drop-shadow);
filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));

不幸的是，如果 SVG 滤镜是存放在一个独立文件里的，那它就无法像一
个简洁易用的函数那样在 CSS 代码中进行随意配置；如果它是内联的，则又会

16 不规则投影 91

඀ࠡ JOEC