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

Question

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

我需要能够使用spread而不是模糊,这样阴影不会成为一些文本背后的大块,但显然当标准说你应该能够指定一个传播属性时,你仍然可以' t.

我听说SVG阴影过滤器可以用来实现与drop-shadow相同的效果(实际上必须在Firefox中使用)但是我还没有找到一种方法将spread属性应用于.

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

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运算符可以非常好地复制我想要的功能,从而更容易为文本提供更符合文本轮廓的"发光"效果.

(奇怪的是,feFlood什么都不做,我无法得到白光,但这是另一个问题的问题.只要在最新Chrome的标签页中打开过滤器,过滤器也会占用100%的单个核心.哦好.)

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

这会产生一个硬的白色边框，后面是一个普通的较软的阴影。堆叠更多相同的颜色可以提供与原始问题相同的结果。