drop-shadow滤镜能实现带颜色的外发光吗
不能直接实现“外发光”效果。filter: drop-shadow() 本质是基于元素 Alpha 通道做阴影投影，它只支持单色、模糊、偏移的硬边阴影，无法模拟 Photoshop 那种从边缘向外均匀扩散、颜色渐变、无方向性的“发光”。你看到的所谓“发光”，其实是用大模糊值 + 小偏移 + 高透明度伪造的近似效果，但边缘仍带轻微方向性（尤其在圆角或斜边处可见）。
为什么不用box-shadow实现彩色外发光
box-shadow 的多层叠加确实能模拟外发光，但限制明显：
- 只作用于盒模型边界，对内联文本、SVG 路径、border-radius 超大圆角或透明区域边缘无效
- 无法跟随元素真实轮廓（比如文字镂空、PNG 透明背景），阴影永远是矩形框的延伸
- 多层写法冗长：
box-shadow: 0 0 5px #0af, 0 0 10px #0af, 0 0 20px #08f，维护成本高 - 在 Retina 屏或缩放页面下，模糊半径像素值易失真，发光感不稳
真正可用的外发光替代方案：filter + SVG filter
若必须精确贴合形状（如文字、图标、任意 SVG），唯一可靠方式是内联 <filter></filter>。CSS 中用 filter: url(#glow) 引用，SVG 内定义高斯模糊 + 颜色矩阵：
<svg width="0" height="0">
<filter id="glow">
<feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>关键点：
立即学习“前端免费学习笔记（深入）”；
-
stdDeviation控制发光宽度，值越大越“胖”，但别超 8，否则性能明显下降 - 要在目标元素上加
filter: url(#glow)，且 SVG<filter></filter>必须在 DOM 中（可放底部或） - 如需彩色发光（非元素本色），在
<fegaussianblur></fegaussianblur>后插入<fecolormatrix></fecolormatrix>调色 - 此方案兼容 Chrome/Firefox/Safari（含 iOS 13.4+），Edge 18- 已淘汰，无需担心
简单场景下最实用的折中写法
对纯色块、卡片、按钮这类规则图形，用 box-shadow 多层叠加仍是最快落地方式。但注意两个易错细节：
- 避免写成
box-shadow: 0 0 10px #ff00aa—— 单层会显得像“光晕”，缺乏层次。至少三层，模糊值递增（如 4px / 8px / 16px），透明度递减（如rgba(255,0,170,0.6)→rgba(255,0,170,0.3)→rgba(255,0,170,0.1)） - 如果元素有
border-radius，务必确保overflow: hidden关闭（默认 visible），否则大模糊会溢出圆角裁剪区 - 不要给
drop-shadow()设负偏移试图“包住”元素——它不会向内发光，只会让阴影位置错乱
外发光不是 CSS 原生能力，所有方案都是权衡。SVG filter 最准但要引入额外标记；box-shadow 最快但只适用于盒子；而 drop-shadow() 名字有误导性，它只是投影，不是光。
