• 文字发光：直接对
  或
  加 filter: drop-shadow(0 0 8px #00f);，无需额外包裹
• PNG 图标发光：确保 的 src 是带 Alpha 通道的图，且未被父容器裁剪或覆盖背景
• SVG 路径发光：在 内对 或 设置 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 屏上更明显。

立即学习“前端免费学习笔记（深入）”；

MiniMax Agent

MiniMax平台推出的Agent智能体助手

下载

• 优先选 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” 实时观察。