CSS3 过滤器：阴影扩散属性的替代品答案

【问题标题】：CSS3 filter: drop-shadow spread property alternativesCSS3 过滤器：阴影扩散属性的替代品
【发布时间】：2014-03-18 16:57:34
【问题描述】：

我正在尝试使用 CSS3 (webkit) 阴影滤镜在任何给定的透明 png 周围放置一个白光，尺寸大致相同，-webkit-filter: drop-shadow(0px 0px 22px rgba(255,255,255,0.8)); 非常适合纯色图像。问题在于它会严重破坏主要是文本的图像。所有阴影混合在一起，而不是创建适当的紧密发光效果。

我需要能够使用散布而不是模糊，这样阴影就不会只是在某些文本后面变成一个大斑点，但显然标准规定you should be able to specify a spread property, you still can't。

我听说可以使用 SVG 投影过滤器来实现与投影相同的效果（实际上必须在 Firefox 中使用），但我一直无法找到应用扩展属性的方法也可以。

对于这个问题有哪些解决方法（如果有的话）？

【问题讨论】：

我建议不要使用图像作为文本。使用实际文本，然后使用text-shadow。这也有利于 SEO。
我得到了相当复杂的徽标来应用这些阴影，通常是几种不同字体的组合，有时还覆盖了其他图像。尽管它会更好，但在 HTML 中重新创建它们不是一种选择。仅将阴影烘焙到 png 中（尽管这是我的第一个响应）也不是一种选择。
我编写了一个 codepen 工具来帮助人们使用 SVG 滤镜进行高级阴影操作 - 享受 codepen.io/mullany/details/sJopz
它实际上还不是标准的一部分，w3.org/TR/filter-effects-1/#funcdef-drop-shadowNote that spread values or multiple shadows are not accepted for this level of the specification.

标签： css svg

【解决方案1】：

实现扩散感的另一种方法是使用多个阴影滤镜。

filter:  
  drop-shadow(1px 1px 2px white)
  drop-shadow(-1px -1px 2px white)
  drop-shadow(1px -1px 2px white)
  drop-shadow(-1px 1px 2px white)
  drop-shadow(1px 0px 2px white) 
  drop-shadow(-1px 0px 2px white)  
  drop-shadow(0px 1px 2px white) 
  drop-shadow(0px -1px 2px white);

这会产生一个硬白色边框，后面有一个正常的柔和阴影。堆叠更多相同的颜色可以得到与原始问题一样的预期结果。

【讨论】：

这不一定适用于文本，但它可以很好地替代 spread 属性。请注意，与 box-shadow 属性不同，每个过滤器必须用空格而不是逗号分隔。我使用多个相同的阴影来创建更重的阴影，但您也可以将每个阴影向上、向下、向左或向右偏移相同的量：5px 0、-5px 0、0 5px 和 0 -5px更真实的传播。
我最终使用了这种方法，但由于过度使用过滤器而遇到了性能问题。我能够使用另一个问题的答案解决这些问题：stackoverflow.com/a/29577985/4325849

【解决方案2】：

好吧，我想出了如何使用 SVG 过滤器替换不起作用的扩展属性。非常感谢 Michael Mullany，尽管他的回答不是 100% 我需要的。这是我正在使用的过滤器：

<filter id="drop-shadow">
    <feMorphology operator="dilate" radius="6" in="SourceAlpha" result="dilated"/>

    <feGaussianBlur stdDeviation="3" in="dilated" result="blurred"/>

    <feFlood flood-color="rgba(255,255,255,0.5)" in="blurred" result="flooded"/>

    <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>

feMorphology dilate 运算符很好地复制了我想要的功能，更容易为文本提供更严格地符合文本轮廓的“发光”效果。

（奇怪的是，feFlood 什么都不做，我无法获得白光，但这是另一个问题的问题。过滤器也会占用 100% 的单个核心，只要它在最新的选项卡中打开Chrome。哦，好吧。）

【讨论】：

【解决方案3】：

文本上的阴影（使用 22 像素）永远不会看起来很好，因为文本和字母间距更接近。如果使用文本，您应该使用text-shadow（或者也许text-stroke 也是您的替代方案，请参阅我的演示）：

http://jsfiddle.net/fHzX7/

【讨论】：

见上面的评论。我很乐意，但我提供的图像只是使用简单的文本作为占位符。实际的“主要是文本图像”是我无法轻松重新创建的复杂徽标。
使用较小的距离怎么样（例如 drop-shadow(0px 0px 5px white) 而不是 drop-shadow(0px 0px 22px white) ？否则这是不可能的。有 backface-visibility:hidden 但这仅在 Firefox 中（正确）有效（对于 drop-阴影）
我明白了。我想它目前看起来并不糟糕，但我绝对希望我能找到一些方法来强制使用类似传播的属性。无论如何感谢您的帮助。

【解决方案4】：

是的，您可以使用 SVG 滤镜来自定义阴影扩散：

  <filter id="f1" x="-20%" y="-20%" width="160%" height="160%">
    <feGaussianBlur in="SourceAlpha" result="blurOut" stdDeviation="8"/>
    <feOffset in="blurOut" result="dropBlur" dx="0" dy="0"/>

  <feComponentTransfer in="dropBlur" result="dropBlur2">
    <feFuncA id="alphaFunc" type="gamma" amplitude="2" exponent="1.5" offset="0"/>
  </feComponentTransfer>

    <feComposite operator="over" 
     in="SourceGraphic" in2="dropBlur2"/>
</filter>

此处的互动演示：http://codepen.io/mullany/pen/sJopz

【讨论】：

这对我想做的事情真的很有帮助，但是你的链接 404s :(