如何在不使用spread值的前提下扩大drop-shadow并实现Logo发光？

嘿，我懂你遇到的麻烦了——标准的drop-shadow滤镜确实不支持spread参数（只有box-shadow有），而且很多浏览器对非标准的-webkit前缀版本的扩展参数支持也不好。不过咱们可以用叠加多层drop-shadow的方法来模拟出大范围扩散的发光效果，兼容性拉满！

核心思路 #

通过叠加多层drop-shadow，每层使用不同的模糊半径和透明度：

• 内层用较小的模糊半径+较高的透明度，保证发光的核心亮度
• 外层用更大的模糊半径+较低的透明度，模拟“扩散”的效果
  多层叠加后，视觉上就会呈现出类似带spread的阴影+发光的质感。

修改后的完整代码 #

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

@keyframes logo-glow {
  0% {
    /* 叠加3层阴影，从内到外模糊增大、透明度降低，模拟大扩散的发光 */
    filter: drop-shadow(0 0 8px rgba(255, 3, 17, 0.9))
            drop-shadow(0 0 16px rgba(255, 3, 17, 0.6))
            drop-shadow(0 0 24px rgba(255, 3, 17, 0.3));
    /* 去掉-webkit前缀，标准filter现在主流浏览器都支持了 */
  }
  100% {
    /* 动画结束端对应调整阴影，保持渐变自然 */
    filter: drop-shadow(0 0 2px rgba(64, 4, 0, 0.9))
            drop-shadow(0 0 4px rgba(64, 4, 0, 0.7))
            drop-shadow(0 0 6px rgba(64, 4, 0, 0.4));
  }
}

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

小提示 #

• 你可以根据需求调整层数、模糊半径和透明度：想要扩散范围更大，就增加外层阴影的模糊半径；想要发光更亮，就提高内层阴影的透明度。
• 现在主流浏览器（Chrome、Firefox、Edge等）都支持标准的filter属性，不用再依赖-webkit-前缀啦，这样兼容性更好。
• 如果想要更极致的发光效果，还可以在0%的帧里额外加个brightness(1.1)滤镜，让Logo本身也稍微提亮一点。

内容的提问来源于stack exchange，提问作者Jeremy