drop-shadow() 能实现轮廓发光但适用场景与 box-shadow 不同：前者基于 Alpha 通道真实跟随内容形状（如文字、PNG、SVG 路径），后者仅围绕矩形盒模型；需注意背景透明、父容器裁剪、浏览器兼容性及性能优化。
filter: drop-shadow() 能不能替代 box-shadow 实现轮廓发光
能，但适用场景完全不同。drop-shadow() 是 SVG 滤镜，作用于元素的**Alpha 通道轮廓**，会真实跟随内容形状（比如带透明背景的 PNG、文字、CSS 剪切路径），而 box-shadow 只围着盒模型矩形边缘发光。
常见错误是直接对 <div> 用 <code>drop-shadow() 却没设 background: transparent 或用了不透明背景——结果还是矩形光晕，误以为失效。
- 文字发光：直接对
<p></p>或<h1></h1>加filter: drop-shadow(0 0 8px #00f);，无需额外包裹 - PNG 图标发光：确保
<img alt="html5滤镜如何让轮廓发光_html5轮廓发光滤镜法【步骤】" >的 src 是带 Alpha 通道的图，且未被父容器裁剪或覆盖背景 - SVG 路径发光：在
<svg></svg>内对<path></path>或<g></g>设置filter属性，比 CSS 更精准
text-shadow 和 filter: drop-shadow() 同时用会叠加吗
会，但机制不同：text-shadow 是逐层绘制文字像素，drop-shadow 是对最终渲染出的文字 Alpha 轮廓再做一次高斯模糊+偏移。两者叠加容易过曝或发虚。
典型问题：给文字同时写 text-shadow: 0 0 4px #ff0; 和 filter: drop-shadow(0 0 6px #ff0)，结果光晕厚重、边缘糊成一团，尤其在 Retina 屏上更明显。
立即学习“前端免费学习笔记（深入）”；
- 优先选
text-shadow：纯文字场景够用、性能好、兼容性佳（IE10+） - 必须用
drop-shadow()：文字含渐变色、背景复杂、或需与 SVG 图形统一滤镜链（如加 blur + contrast） - 若真要叠加，建议把
text-shadow设为窄边（0 0 2px），drop-shadow控制在0 0 4px以内，避免半径总和超过 8px
drop-shadow() 在 Firefox 和 Safari 中不生效的常见原因
不是浏览器不支持（Firefox 35+、Safari 6.1+ 都支持），而是常被以下配置意外禁用：
-
transform触发了硬件加速但未创建新层：加will-change: filter或transform: translateZ(0)强制生成合成层 - 父元素设置了
overflow: hidden且子元素发光区域超出边界：drop-shadow 的模糊区域会被裁剪，需扩大父容器 padding 或改用clip-path: none - CSS 优先级冲突：某些 UI 框架（如 Bootstrap）的
!important规则覆盖了你的filter，用浏览器开发者工具检查 computed 样式中filter是否被划掉 - Safari 对
drop-shadow()的x/y偏移值敏感：避免写非零值（如drop-shadow(2px 2px 4px #000)），改用0 0基础值更稳
用 CSS filter chain 给复杂图形加多层发光效果
单个 drop-shadow() 只能模拟一层光晕，但通过 filter 函数链可组合出内发光+外发光+晕染感，例如：
filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #ff9) drop-shadow(0 0 12px rgba(255,0,128,0.6));
注意顺序：从左到右依次应用，前一个的输出是后一个的输入。所以小半径放前面，大半径放后面；颜色越靠后越“透”，适合做渐变晕开效果。
- 不要超过 3 个 drop-shadow：性能下降明显，尤其在移动端滚动时掉帧
- 避免混用
blur()和drop-shadow()：blur 会先模糊整个元素，再让 drop-shadow 作用在模糊后的轮廓上，极易失控 - 动画慎用：对
filter做transition或@keyframes时，只 animating 半径值（如drop-shadow(0 0 ${r}px #000)），别 animating 颜色或偏移
真正难的是平衡视觉强度和性能开销——发光越强，GPU 渲染压力越大，尤其在低配安卓机上，drop-shadow(0 0 20px) 可能直接卡顿。建议设计阶段就用 DevTools 的 Rendering 面板勾选 “Paint flashing” 和 “FPS meter” 实时观察。
