我正在尝试使用CSS3(webkit)阴影滤镜在任何给定的透明png周围放置一个白色光晕,大小相同,并且-webkit-filter：drop-shadow(0px 0px 22px rgba(255,255,0.8) );对于可靠的图像非常有用.问题是它破坏了主要是文字有点可怕的图像.所有阴影融合在一起,而不是创造一个适当的紧密发光效果.
我需要能够使用spread而不是模糊,这样阴影不会成为一些文本背后的大块,但显然标准是you should be able to specify a spread property,you still can’t.
我听说SVG阴影滤镜可以用来实现与投影相同的效果(事实上必须在Firefox中使用)但是我还没有找到一种方法来应用扩展属性.
这个问题有什么样的解决方法,如果有的话？
解决方法
好吧,我想出了如何使用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,0.5)" in="blurred" result="flooded"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
feMorphology dilate运算符非常好地复制了我想要的功能,使文本更容易为文本提供更符合文本轮廓的“发光”效果.
(奇怪的是,feFlood什么都不做,我无法获得白光,但这是另一个问题的问题.只要在最新Chrome的标签页中打开,过滤器也会占用100％的单个核心.哦好.)
