单层 inset 阴影易发灰、边缘生硬、圆角或 Safari 下消失；需组合参数：模糊值≤圆角×2、加 background-clip: padding-box、禁用 filter 冲突、overflow:hidden 时配 clip-path:none；文字内发光须用 background-clip:text+渐变背景+inset 阴影，并注意 Safari 兼容、字体大小≥18px、避免高代价重绘与模糊＞25px+动画导致的性能问题。
直接用 box-shadow: inset 很难做出“逼真”的内发光——它容易发灰、边缘生硬、在圆角或 Safari 下消失，真正可用的效果必须靠参数组合+规避渲染陷阱。
为什么单层 inset 阴影看起来假
常见错误是写成 box-shadow: inset 0 0 10px #fff：模糊值太小（#ffffff 在浅背景上会“吃掉”对比度；而 inset 的渲染本质是“向内投阴影”，不是“发光”，所以必须用低饱和+带 alpha 的色值模拟散射光。
关键参数要同时满足：
- 偏移量严格为
0 0（任何非零值都会让光晕偏移、失衡） - 模糊半径 ≥12px（16–24px 更稳妥）
- 扩展值设为
0或略正（如+2px），负值会收缩光晕、加剧四角堆积 - 颜色必须用
rgba()或hsla()，透明度控制在0.2–0.6区间
box-shadow: inset 多层叠加的真实写法
单层只能模拟“均匀泛光”，两层错开参数才能还原光源散射层次：外层负责弥散，内层负责核心辉光。比如蓝白双光晕效果：
box-shadow: inset 0 0 20px 0 rgba(102, 179, 255, 0.3),
inset 0 0 8px 2px rgba(255, 220, 100, 0.6);
注意点：
- 外层模糊大（20px）、扩展为
0、透明度低（0.3）→ 营造氛围光 - 内层模糊中（8px）、扩展略正（
2px）、透明度高（0.6）→ 强化文字/容器中心亮度 - 两层颜色要有明显色相差异（如冷蓝 + 暖黄），混成灰就失败了
- 别堆三层以上——浏览器合成压力陡增，移动端易掉帧
圆角容器 + 内发光的 Safari 兼容避坑
Safari 对 inset 阴影和 border-radius 的交叠渲染极敏感：圆角为 6px 时，若模糊值 > 12px，边缘可能发虚甚至不显示。
立即学习“前端免费学习笔记（深入）”；
安全做法：
- 模糊值 ≤ 圆角值 × 2（例：
border-radius: 8px→ 模糊最大用16px） - 加
background-clip: padding-box，防止阴影被border裁切 - 避免同时使用
box-shadow和filter: drop-shadow()，Safari 渲染管线冲突会导致闪烁 - 如果容器设了
overflow: hidden，又想用伪元素方案做更复杂内发光，得显式加clip-path: none或改用overflow: visible
文字内发光不能只靠 text-shadow
text-shadow 没有 inset，且无法模拟“光从字形内部透出”的立体感。真实方案是用文字当蒙版：
先设 color: transparent 和 background-clip: text，再给文字加渐变背景，最后用 box-shadow: inset 作用于这个背景上。但要注意：
- 必须配合
-webkit-background-clip: text和-webkit-text-fill-color: transparent才能在 Safari 正常工作 - 字体不能太细（建议 ≥18px），否则内阴影细节丢失
- 避免在动画中频繁触发该效果——
background-clip: text是高代价重绘属性，Chrome DevTools 开启 “Paint flashing” 会看到大片红色
最易被忽略的其实是性能临界点：模糊值 >25px + 两层叠加 + transition 动画，合成层压力会直接拉垮低端安卓机滑动帧率。上线前务必用真机测滚动是否掉帧。
