我正在尝试使用CSS3(webkit)阴影过滤器在尺寸大致相同的任何给定透明png周围放置白色辉光,并且-webkit-filter: drop-shadow(0px 0px 22px rgba(255,255,255,0.8));
非常适用于实心图像。问题在于,它会使一些主要是文本的图像变得有些可怕。所有阴影融合在一起,而不是产生适当的紧密发光效果。
我需要能够使用散布而不是模糊,以使阴影不仅成为某些文本后面的大 Blob ,而且显然是在标准中说you should be able to specify a spread property, you still can't。
我听说SVG阴影滤镜可用于实现与阴影相同的效果(实际上必须在Firefox中使用),但我也找不到一种将散布属性应用于该阴影的方法。
存在针对该问题的哪种解决方法(如果有)?
最佳答案
好吧,我想出了如何使用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不会执行任何操作,并且我无法发出白光,但这是另一个问题。只要在最新的Chrome浏览器中的标签页中打开过滤器,过滤器还会吞噬100%的单核。出色地。)