让投影效果扩散更远

Question

我希望我的标志能够稍微发光。为此，我使用了-webkit-filter: drop-shadow(0 0 8px rgba(255, 3, 17, 0.8)。问题是大多数浏览器不支持扩散值（第四个值）。那么，如何在没有扩散值的情况下让drop-shadow效果更大？

img {
    height: auto;
    width: 200px;
    margin-right: 2vw;
    animation: logo-glow 2s infinite alternate-reverse;
}

@keyframes logo-glow{
    0% {
        -webkit-filter: drop-shadow(0 0 15px rgba(255, 3, 17, 0.8));
    }
    100% {
        -webkit-filter: drop-shadow(0px 0px 1px rgba(64, 4, 0, 0.87));
    }
}

<img src="http://www.tdcdkhd.com/wp-content/uploads/2018/03/logo.png">

这是我将在网页上使用的图片：

- Jeremy

Answer 1

没有直接替代spread属性的方法，它实际上不是标准的一部分。可以尝试使用SVG滤镜，如CSS3 filter: drop-shadow spread property alternatives所述。否则，可以在另一张图片上方放置一张图片，并使用变换来扩展背景，但我不确定这是否是您想要的效果。

@keyframes logo-grow {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}

然后将其应用于背景图像。您需要确保两个图像的大小完全匹配，否则重叠会看起来很糟糕（就像上面的演示一样）。

- Tom

---

这是最好的答案，我希望他们能够实现一个 drop-shadow 扩散属性。两张图片重叠在一起可以工作，但在某些屏幕尺寸上看起来有些错误，因为当调整徽标大小时，两个字符之间的间距也会变大。因此，发光效果看起来很糟糕。我想我只能使用几乎不可见的发光效果 :P - Jeremy

@Jeremy 是的，这很不幸。你可以尝试使用CSS at-rule支持和spread选项，看看是否至少能在支持它的浏览器中得到你想要的效果。否则，你就必须小心地使用遮罩技巧来放置元素。 - Tom