Page 123 - css揭秘

搅乱你的代码。参数需要写死在文件内部，因此每当我们新加一种哪怕是大同
小异的投影效果时，都需要多准备一个文件，这显然是难以接受的。当然，我
们还可以使用 data URI（它也会省掉额外的 HTTP 请求），但这个方法仍然会带
来文件体积的增长。总的来说，这个方法只是一种回退方案，因此只要我们把
SVG 滤镜控制在一定数量以内，哪怕它们的效果大同小异，也是说得过去的。

另外一件需要牢记的事情就是，任何非透明的部分都会被一视同仁地
图 4-8
打上投影，包括文本（如果背景是透明的），正如我们刚刚在图 4-7 中看到
text-shadow 也会从 drop-shadow() 的那样。你可能会想，是不是可以通过 text-shadow: none; 来取消掉文
滤镜那里得到一层投影
本上的投影呢？其实 text-shadow 跟它是完全不相干的两码事，因此这样
做并不能取消文本上的 drop-shadow() 效果。此外，如果你已经用 text-
shadow 在文本上加了投影效果，文本投影还会被 drop-shadow() 滤镜再加
上投影，这本质上是给投影打了投影！看看下面这段示例代码（请原谅它惨
不忍睹的效果，这样只是为了凸显这个怪异的问题）：

color: deeppink;
border: 2px solid;
text-shadow: .1em .2em yellow;
filter: drop-shadow(.05em .05em .1em gray);

你可以在图 4-8 中看到它的渲染效果，图中的文字被同时打上了 text-
shadow 和 drop-shadow()。

试一试 play.csssecrets.io/drop-shadow

„ 滤镜效果 相关规范
http://w3.org/TR/filter-effects

92 第 4 章 视觉效果

඀ࠡ JOEC