如何用纯CSS实现带线性后置阴影的3D文字效果？

要实现阴影呈线性分布在文字后方的3D效果，核心是用多层连续的text-shadow叠加，让阴影按固定偏移递增、颜色从深到浅渐变，模拟出平滑的线性延伸感。

实现代码（原生CSS） #

.isometric-text {
  font-size: 8rem;
  font-weight: 900;
  color: #fff;
  /* 多层阴影按固定偏移和透明度渐变排列 */
  text-shadow:
    2px 2px rgba(0, 0, 0, 0.8),
    4px 4px rgba(0, 0, 0, 0.77),
    6px 6px rgba(0, 0, 0, 0.74),
    8px 8px rgba(0, 0, 0, 0.71),
    10px 10px rgba(0, 0, 0, 0.68),
    12px 12px rgba(0, 0, 0, 0.65),
    14px 14px rgba(0, 0, 0, 0.62),
    16px 16px rgba(0, 0, 0, 0.59),
    18px 18px rgba(0, 0, 0, 0.56),
    20px 20px rgba(0, 0, 0, 0.53),
    22px 22px rgba(0, 0, 0, 0.5),
    24px 24px rgba(0, 0, 0, 0.47),
    26px 26px rgba(0, 0, 0, 0.44),
    28px 28px rgba(0, 0, 0, 0.41),
    30px 30px rgba(0, 0, 0, 0.38),
    32px 32px rgba(0, 0, 0, 0.35),
    34px 34px rgba(0, 0, 0, 0.32),
    36px 36px rgba(0, 0, 0, 0.29),
    38px 38px rgba(0, 0, 0, 0.26),
    40px 40px rgba(0, 0, 0, 0.23),
    42px 42px rgba(0, 0, 0, 0.2),
    44px 44px rgba(0, 0, 0, 0.17),
    46px 46px rgba(0, 0, 0, 0.14),
    48px 48px rgba(0, 0, 0, 0.11),
    50px 50px rgba(0, 0, 0, 0.08);
}

优化方案（用SCSS减少重复代码） #

如果使用CSS预处理器（比如SCSS），可以通过循环自动生成多层阴影，更灵活易维护：

.isometric-text {
  font-size: 8rem;
  font-weight: 900;
  color: #fff;
  $shadow-step: 2px;
  $shadow-count: 25;
  $start-opacity: 0.8;
  $opacity-decrement: 0.8 / $shadow-count;

  text-shadow: 
    @for $i from 1 through $shadow-count {
      $x: $shadow-step * $i;
      $y: $shadow-step * $i;
      $opacity: $start-opacity - ($opacity-decrement * $i);
      #{$x} #{$y} rgba(0, 0, 0, #{$opacity}),
    }
    /* 最后一层修正避免逗号语法问题 */
    $final-x: $shadow-step * $shadow-count;
    $final-y: $shadow-step * $shadow-count;
    #{$final-x} #{$final-y} rgba(0, 0, 0, 0.05);
}

关键调整细节 #

• 偏移一致性：保持x和y方向的偏移按固定步长递增，确保阴影线性延伸的方向统一
• 透明度渐变：从高到低调整阴影透明度，模拟阴影随距离变远而淡化的真实视觉效果
• 层数控制：阴影层数越多，过渡越平滑，可根据需求调整手动添加的层数或SCSS中的$shadow-count值
• 方向自定义：修改偏移步长的正负值，或单独调整x/y偏移，可改变阴影的延伸方向（比如向左下方、右上方等）

你之前的效果大概率是因为阴影层数太少、偏移不连续，导致出现明显断层，无法形成线性分布的视觉效果。按照上述方式叠加足够多的连续阴影，就能匹配目标图的效果。

内容的提问来源于stack exchange，提问作者Vivek Hotti