CSS3过滤器：阴影扩散属性替代 [英] CSS3 filter: drop-shadow spread property alternatives

问题描述

我试图使用CSS3（webkit）阴影过滤器，围绕任何大小相同的尺寸的透明png发出白光， -webkit-filter：drop-shadow 0px 0px 22px rgba（255,255,255,0.8））; 是非常适合实体图像。问题是，它损坏的图像，主要是文本有点可怕。所有的阴影混合在一起，而不是创建一个适当的紧密发光效果。

I'm trying to use a CSS3 (webkit) drop-shadow filter to place a white glow around any given transparent png with approximately the same dimensions, and -webkit-filter: drop-shadow(0px 0px 22px rgba(255,255,255,0.8)); is working great for solid images. The problem is that it mangles images that are primarily text somewhat horribly. All the shadows blend together instead of creating a proper tight glow effect.

>

我需要能够使用spread而不是blur，这样阴影不会成为一个大文本后面的一个大blob，但显然，当标准说您应该能够指定一个spread属性，你仍然不能。

I need to be able to use spread instead of blur so that the shadows don't just become a big blob behind some of the text, but apparently while the standard says that you should be able to specify a spread property, you still can't.

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

I've heard that SVG drop shadow filter can be used to achieve the same effect as drop-shadow (and in fact must be used in Firefox) but I haven't been able to find a way to apply a spread property to that either.

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

What kind of workarounds exist for this problem, if any?

推荐答案

好了，我想出了如何使用SVG过滤器替换非功能的扩展属性。非常感谢Michael Mullany，虽然他的答案不是100％我需要的。这里是我使用的过滤器：

Well, I figured out how to replace the non-functioning spread property using SVG filters. Big thanks to Michael Mullany though his answer wasn't 100% what I need. Here's the filter I'm using:

<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操作符复制了我想要的功能，

feMorphology dilate operator replicates the functionality I wanted very nicely, making it easier to give the text a 'glow' effect that conforms a lot more strictly to the outline of the text.

（奇怪，feFlood什么都不做，我不能得到白光，但这是另一个问题的问题。只要在最新的Chrome中的标签页中打开，过滤器也会占用单个内核的100％）哦

(Oddly, feFlood does nothing and I'm unable to get a white glow, but that's a problem for another question. The filter also eats up 100% of a single core as long as it's open in a tab in the latest Chrome. Oh well.)

这篇关于CSS3过滤器：阴影扩散属性替代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！