CSS 如何实现文字立体投影？

Question

CSS 如何实现文字立体投影？

仓乃文 · Accepted Answer

文字立体投影可以通过多层 text-shadow 叠加实现，借助 SASS 函数可以快速生成多层阴影，让文字呈现 3D 立体感。

```scss
@function makeLongShadow($color) {
  $val: 0px 0px $color;
  @for $i from 1 through 50 {
    $val: #{$val}, #{$i}px #{$i}px #{$color};
  }
  @return $val;
}

.text {
  text-shadow: makeLongShadow(hsl(14, 100%, 30%));
}
```

进阶：让阴影有明暗度变化更自然
```scss
@function makelongrightshadow($color) {
  $val: 0px 0px $color;
  @for $i from 1 through 50 {
    $color: fade-out(desaturate($color, 1%), .02);
    $val: #{$val}, #{$i}px #{$i}px #{$color};
  }
  @return $val;
}
```

补充说明：
- text-shadow 支持多层叠加，用逗号分隔
- 纯 CSS 手动写 50 层太繁琐，推荐用 SASS/LESS 函数生成
- fade-out 改变透明度，desaturate 降低饱和度，让阴影逐层衰减更自然
- HSL 颜色格式更容易控制明暗度（L 参数）