如何在CSS中实现内发光文字特效_编写Sass循环叠加阴影-css教程-PHP中文网

内发光文字本质是多层text-shadow叠加模拟，非inset语法；需渐进式模糊与透明度衰减，sass循环生成最佳；ie/旧edge需@supports降级；6–8层兼顾性能与效果。

如何在css中实现内发光文字特效_编写sass循环叠加阴影

内发光文字的本质是多层 `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，颜色可替换）：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

@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);
}</p>

注意：append(..., comma) 是必须的，否则编译后值不被识别为合法 text-shadow 列表。