如何用CSS实现延伸至左角落的文本阴影以替代静态图片？

完全可以用CSS搞定这个效果，不用再依赖静态图。别纠结text-shadow了，它做不了这种长延伸的阴影，换用伪元素+线性渐变的方案就行，具体实现如下：

1. 基础HTML结构 #

把无数字底图和动态数字分层放置，结构很简洁：

<div class="anniversary-container">
  <img src="你的无数字底图路径" alt="周年背景图" class="bg-image">
  <span class="year-number">10</span>
</div>

2. CSS样式实现长阴影 #

核心是给数字元素添加伪元素，模拟向左延伸的阴影效果：

.anniversary-container {
  position: relative;
  /* 根据你的底图尺寸设置宽高 */
  width: 350px;
  height: 180px;
  overflow: hidden;
}

.bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.year-number {
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 70px;
  font-weight: 800;
  color: #ffffff;
  /* 确保数字在阴影层上方 */
  position: relative;
  z-index: 2;
}

.year-number::before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  height: 100%;
  /* 设置足够大的宽度，确保阴影能延伸到容器左角落 */
  width: 1000px;
  /* 渐变阴影，可根据底图色调调整颜色和透明度 */
  background: linear-gradient(to right, rgba(30, 30, 30, 0.8), rgba(30, 30, 30, 0));
  z-index: 1;
}

灵活调整说明 #

• 如果需要实色阴影而非渐变，直接把伪元素的background改成固定颜色即可，比如background: #1e1e1e;
• 伪元素的宽度可以根据实际布局调整，用calc(100vw + 100%)也能确保覆盖足够范围
• 数字的定位（right、top值）可根据底图的排版需求调整，保证和原静态图的视觉对齐

这样修改后，就能动态替换数字内容，同时完美还原那种延伸至左角落的阴影效果。

内容的提问来源于stack exchange，提问作者Ratnaprabha Bhoir