CSS 如何实现线条光影/Neon 效果？

Question

仓乃文 · Accepted Answer

利用 filter: drop-shadow() 对元素的部分内容添加多重阴影，可以实现线条光影/Neon 效果。与 box-shadow 不同，drop-shadow 会基于元素可见部分（alpha 通道）添加阴影，适合线条、SVG 等不规则形状。

```css
.neon-line {
  fill: none;
  stroke: #fff;
  stroke-width: 10;
  --color: #f24983;
  filter:
    drop-shadow(0 0 2px var(--color))
    drop-shadow(0 0 5px var(--color))
    drop-shadow(0 0 10px var(--color))
    drop-shadow(0 0 15px var(--color))
    drop-shadow(0 0 25px var(--color));
}
```

补充说明：
- drop-shadow() 可以叠加多层，每层阴影的模糊半径递增，模拟光线扩散
- 适合 SVG 线条动画、按钮边框等场景
- 配合 stroke-dasharray 和 stroke-dashoffset 可实现线条动画
- 多条线条可设置不同颜色的 drop-shadow 实现多彩霓虹效果