用 box-shadow 的 inset 模式配合 rgba 颜色可实现柔和内发光效果，关键在于控制透明度和模糊半径；支持多层叠加增强层次感，并需注意背景、边框与圆角的协同配合。
用 box-shadow 的 inset 模式配合 rgba 颜色，就能做出柔和的阴影内发光效果——关键不是加多厚的阴影，而是控制透明度和模糊半径。
基础写法：inset + rgba
直接在元素上设置带透明度的 inset 阴影：
示例：box-shadow: inset 0 0 20px rgba(255, 220, 100, 0.6);
这里 inset 让阴影向内投射；0 0 表示无偏移；20px 是模糊距离，越大光晕越扩散；rgba(255, 220, 100, 0.6) 是带透明度的暖黄色，决定发光颜色和强度。
立即学习“前端免费学习笔记（深入）”；
叠加多层 inset 阴影增强层次感
单层容易显得单薄，可叠加 2–3 层不同模糊值和透明度的阴影，模拟真实光晕过渡：
-
内层（紧贴边缘）：小模糊 + 较高透明度 → 如
inset 0 0 5px rgba(255, 220, 100, 0.8) -
中层（主光晕）：中等模糊 + 中等透明度 → 如
inset 0 0 15px rgba(255, 220, 100, 0.5) -
外层（柔化边缘）：大模糊 + 低透明度 → 如
inset 0 0 30px rgba(255, 220, 100, 0.2)
所有层用逗号分隔，写在同一个 box-shadow 属性里即可。
注意背景与边框的影响
内发光效果容易被遮挡或削弱，需配合调整：
- 确保元素有**纯色或深色背景**，浅背景会冲淡发光感
- 避免设置
border或使用outline，否则阴影可能被截断或错位 - 如需圆角效果，记得同步设置
border-radius，inset 阴影会自动贴合圆角形状
兼容性与替代思路
现代浏览器（Chrome、Firefox、Safari、Edge）均支持 inset + rgba。IE10+ 也支持，但 IE9 及更早不支持 inset 或 rgba 在阴影中使用。如需兼容老版本，可用伪元素 + filter: blur() 模拟，但性能略低、控制不如原生精确。
基本上就这些——调好 rgba 的 alpha 值和模糊半径，再叠两层，内发光就很自然了。
