内发光文字本质是多层text-shadow叠加模拟，非inset语法；需渐进式模糊与透明度衰减，Sass循环生成最佳；IE/旧Edge需@supports降级；6–8层兼顾性能与效果。
内发光文字的本质是多层 text-shadow 叠加
纯 CSS 实现内发光（inset glow）没有 text-shadow: inset 这种语法——它只支持外阴影。所谓“内发光”，其实是用多层浅色、小偏移、高模糊度的 text-shadow 从四周向中心“挤”出光晕感，视觉上模拟内嵌发光。关键不是单层阴影，而是叠加密度和衰减节奏。
常见错误是只写一层 text-shadow: 0 0 5px #fff，结果发虚无层次；或堆叠太多相同参数，导致边缘生硬、性能下降。
Sass 循环生成渐进式 text-shadow 值
手动写 10 层 text-shadow 不现实，也难调参。Sass 的 @for 循环最适合控制模糊半径递减 + 透明度递增，让光晕自然收敛到文字内部。
示例逻辑（单位 px，颜色可替换）：
立即学习“前端免费学习笔记（深入）”；
@function inner-glow($color, $layers: 8) {
$shadows: ();
@for $i from 1 through $layers {
$blur: ($layers - $i + 1) * 0.8; // 外层模糊大，内层小
$alpha: 0.12 - ($i - 1) * 0.012; // 外层透明度略高，向内衰减
$shadow: 0 0 $blur * 1px rgba($color, $alpha);
$shadows: append($shadows, $shadow, comma);
}
@return $shadows;
}
<p>h1 {
color: #000;
text-shadow: inner-glow(#ffeb3b);
}注意：append(..., comma) 是必须的，否则编译后值不被识别为合法 text-shadow 列表。
IE/旧 Edge 不支持多层 text-shadow 或透明度时的降级处理
IE10+ 支持 text-shadow，但多层叠加在 IE11 中偶有渲染异常；旧 Edge 对 rgba() 在 text-shadow 中的支持不稳定。实际项目中建议：
- 用
@supports (text-shadow: 0 0 1px transparent)包裹高级样式，避免全盘失效 - 基础色文字 + 单层浅阴影作为 fallback，比如
text-shadow: 0 0 2px rgba(255, 255, 255, 0.5) - 避免在
text-shadow中使用hsl()或color-mix()等新语法，兼容性更差
性能与可维护性：别盲目堆层数
超过 12 层 text-shadow 在低端 Android 或 Safari iOS 15 以下设备上可能引发重绘卡顿，尤其配合 transform 动画时。实测 6–8 层在清晰度和性能间平衡最好。
真正容易被忽略的是字体粗细与内发光的匹配——font-weight: 300 的细体字用强内发光会“吃掉”笔画，而 font-weight: 700 的粗体则需要更大模糊值才能撑开光晕。调试时优先调 $blur 增量，再微调 $alpha 衰减斜率。
