真正柔和的内发光需满足偏移为0、模糊半径≥12px、颜色带透明度；单层inset难显立体感，推荐双层叠加（外层大模糊低透明、内层中模糊略扩展高透明）并错开色相；伪元素方案可实现内容透光但需防裁剪与层级问题。
box-shadow: inset 是内发光的起点，但不是全部
直接写 box-shadow: inset 0 0 10px #fff 看起来像发光，其实只是个硬边内阴影。真正柔和的内发光必须满足三个条件：偏移为 0（或极小）、模糊半径足够大（≥12px）、颜色带透明度。纯色如 #ffffff 在浅背景上会“消失”，换成 rgba(255, 255, 255, 0.4) 或 hsla(210, 100%, 70%, 0.5) 才能透出层次。
常见错误现象：
– 内发光只在元素四角出现，中间发暗 → 模糊值太小或扩展值为负
– 光晕被 border 裁掉 → 没加 background-clip: padding-box 或设了 border: none
– 圆角容器边缘发虚甚至不显示 → Safari 对 inset 渲染敏感，border-radius 和模糊值需匹配（例如圆角 6px，模糊别超 12px）
多层 inset 阴影叠加比单层更真实
单层 inset 很难模拟光源从内部散射的立体感。用两层不同颜色、不同模糊/扩展值的 inset 阴影叠加，能做出蓝白双光晕、紫金渐变光等效果。关键不是堆叠数量，而是参数错开：
- 外层：模糊大（
20px）、扩展小（0）、透明度低（0.3），负责弥散光晕 - 内层：模糊中（
8px）、扩展略正（2px）、透明度高（0.6），负责核心辉光 - 两层颜色要有色相差（如
rgba(102, 179, 255, 0.3)+rgba(255, 220, 100, 0.6)），避免混成灰
示例：box-shadow: inset 0 0 20px 0 rgba(102, 179, 255, 0.3), inset 0 0 8px 2px rgba(255, 220, 100, 0.6);
立即学习“前端免费学习笔记（深入）”；
伪元素方案适合复杂内发光，但要防裁剪和层级错乱
当设计稿要求“光从内容区透出”（比如卡片内容自带辉光），仅靠 inset 不够——它始终贴着容器边缘。这时得用 ::before 伪元素盖一层带 box-shadow 的蒙版，并沉到内容下方：
- 容器必须设
position: relative，伪元素才可定位 - 伪元素需
content: ""+position: absolute+inset: 0+z-index: -1 - 若容器有
overflow: hidden，伪元素会被裁掉 → 改用overflow: visible或给父级加clip-path: none - 避免同时对同一元素用
box-shadow和filter: drop-shadow()，它们触发不同渲染管线，Safari 易闪烁
性能和兼容性陷阱常被忽略
高模糊值（>25px）+ 多层叠加 + 动画过渡，会让合成层压力陡增。移动端滑动时掉帧，Chrome DevTools 的 “Rendering” 面板打开 “Paint flashing” 就能看到大片红色重绘区。
兼容性上：
– IE 完全不支持 inset，别指望降级；
– Firefox 支持 mix-blend-mode 在伪元素上生效，但 Chrome/Safari 不支持，无法复现设计师给的 Screen 混合模式光效；
– 所谓“完美内发光”本质是妥协：用多层 inset 模拟散射，用伪元素绕过限制，但永远达不到 Figma 图层混合那种通透感。
