box-shadow实现外发光的核心是控制模糊半径、扩展半径与透明度：如0 0 12px 4px rgba(100,180,255,0.6)，需避免overflow:hidden裁剪、慎用多层叠加（建议两层）、注意颜色明度匹配背景及动态缩放限制。
box-shadow 实现外发光的基本写法
外发光本质是带模糊的阴影，box-shadow 是唯一标准且兼容性足够好的方式。关键不是“加光”，而是控制阴影的扩散与透明度。
-
box-shadow: 0 0 12px 4px rgba(100, 180, 255, 0.6)—— 这是最接近“纯外发光”的写法：水平偏移0、垂直偏移0、模糊半径12px（决定光晕软硬）、扩展半径4px（决定光晕向外撑开多少） - 省略第四个参数（扩展半径）时，阴影只模糊不外扩，容易被误认为“不够亮”或“贴边太紧”
- 别用
text-shadow或伪元素模拟——那是绕路，且无法响应盒模型变化
为什么发光总像“糊了一圈灰”而不是“亮光”
根本原因是颜色明度和透明度没调对。默认用 #ff0 或 white 加高透明度，实际会因背景干扰显得发灰。
- 优先选比背景色更亮、色相明确的颜色，比如深色背景用
rgba(120, 200, 255, 0.7)，浅色背景用rgba(255, 100, 150, 0.5) - 模糊值（第三个参数）太大（如
30px）+ 透明度太高（如0.2）= 光晕稀薄、缺乏聚焦感；建议从8px–20px模糊 +0.4–0.7透明度起步调试 - 注意父容器是否设置了
overflow: hidden——它会直接裁掉box-shadow的发光部分，这是最常被忽略的隐藏陷阱
多层 box-shadow 叠加实现更自然的光效
单层 box-shadow 很难兼顾近处亮度和远处渐隐，两层叠加更可控。
- 内层：小模糊 + 高透明度 + 稍大扩展，负责“光晕基底”，例如
0 0 6px 3px rgba(100, 180, 255, 0.5) - 外层：大模糊 + 低透明度 + 零扩展，负责“柔散光边”，例如
0 0 24px 0 rgba(100, 180, 255, 0.2) - 两层之间用英文逗号分隔，顺序不影响渲染结果，但建议按由内到外写，方便后续维护
- 不要超过三层——浏览器绘制开销明显上升，尤其在滚动或动画中，iOS Safari 容易出现闪烁
box-shadow 外发光在真实场景中的限制
它不是万能灯泡，得清楚边界在哪。
立即学习“前端免费学习笔记（深入）”；
- 不支持 CSS 动画的独立控制：不能只给模糊半径做
transition，整个box-shadow值必须整体过渡，否则会闪动 - 无法响应内容尺寸自动缩放：如果盒子宽高动态变化，发光效果不会自适应，需配合 JS 重设或用
clamp()等函数约束参数范围 - 在
transform: scale()后，发光不会等比缩放，看起来会变细或变粗——此时应改用filter: drop-shadow()替代（但注意drop-shadow不支持扩展半径）
真正麻烦的从来不是怎么写那行 box-shadow，而是想清楚这光该服务于交互反馈、视觉层级，还是纯粹装饰。后者最容易掉进不停调参的坑里。
