获得投影以进一步传播

Question

我想让我的徽标发光一点.为此,我正在使用-webkit-filter: drop-shadow(0 0 8px rgba(255, 3, 17, 0.8).问题是大多数浏览器不支持传播的第4个值.那么如何在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">

这是我要在我的网页上使用的图片:

Answer 1

spread 属性没有直接的替代方案，它实际上不是标准的一部分。可以按照CSS3 过滤器使用 SVG 过滤器： drop-shadow spread 属性替代方案。否则，可能可以在另一张图像之上使用一张图像并使用变换来增加背景，但我不确定这是否是您想要的效果。

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

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