Question

我正在尝试使用CSS3（webkit）阴影滤镜在任何给定的透明png周围放置一个白色光晕，大小相同，-webkit-filter: drop-shadow(0px 0px 22px rgba(255,255,255,0.8));对于实体图像效果很好。问题是它破坏了主要是文字有点可怕的图像。所有阴影融合在一起，而不是创造一个适当的紧密发光效果。

enter image description here

我需要能够使用spread而不是模糊，这样阴影不会成为一些文本背后的大块，但显然标准会说you should be able to specify a spread property, you still can't。

我听说SVG投影滤镜可以用来实现与投影相同的效果（实际上必须在Firefox中使用）但是我还没有找到一种方法来应用传播属性那个。

这个问题有什么样的解决方法，如果有的话？

Answer 1

好吧，我想出了如何使用SVG过滤器替换无功能的spread属性。非常感谢迈克尔·穆拉尼，尽管他的答案不是我所需要的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运算符可以非常好地复制我想要的功能，从而更轻松地为文本提供“发光”功能。效果更严格地符合文本的轮廓。

enter image description here

（奇怪的是，feFlood什么都不做，而我却无法获得白光，但这又是另一个问题的问题。只要它过滤器过滤器也会消耗掉100％的单个核心。＆＃39 ; s在最新Chrome的标签页中打开。哦，好吧。）

Answer 2

获得散布感的另一种方法是使用多个阴影过滤器。

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);

这会导致白色边框变硬，后面带有正常的柔和阴影。堆叠更多相同的颜色可以提供与原始问题相同的预期结果。

Answer 3

是的，您可以使用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

Answer 4

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

http://jsfiddle.net/fHzX7/

CSS3过滤器：drop-shadow spread属性替代品

4 个答案: