CSS3 过滤器 : drop-shadow spread property alternatives

Question

我正在尝试使用 CSS3 (webkit) 投影过滤器在任何给定的具有大致相同尺寸的透明 png 周围放置白光，并且 -webkit-filter: drop-shadow(0px 0px 22px rgba(255,255,255,0.8)); 非常适合实体图像。问题在于它会严重破坏主要是文本的图像。所有的阴影混合在一起，而不是产生适当的紧密发光效果。

我需要能够使用 spread 而不是 blur，这样阴影就不会变成一些文本后面的大 Blob ，但显然标准说 you should be able to specify a spread property, you still can't .

我听说 SVG 投影过滤器可用于实现与投影相同的效果(实际上必须在 Firefox 中使用)但我一直无法找到应用传播属性的方法要么。

此问题有哪些解决方法(如果有)？

Answer 1

另一种实现扩散感的方法是使用多个投影滤镜。

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

这会产生一个硬白色边框，后面有一个正常的较柔和的阴影。堆叠更多相同的颜色可以得到与原始问题相同的结果。