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

我正在尝试使用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％的单个核心.哦好.)

原文地址：https://www.jb51.cc/css/217453.html