如何简化CSS中实现3D box-shadow阴影效果的代码行数？

你当前用多层box-shadow实现了拱门的3D效果，确实可以通过CSS特性减少代码行数，以下是几种实用方案：

一、利用CSS自定义属性简化重复值 #

把重复的阴影颜色绑定到currentColor，同时省略冗余的0px参数，能大幅缩短每行阴影的代码长度：

html {
  padding: 40px;
}
.arch {
  transition: all 250ms ease-in 0s;
  background: orange;
  border-radius: 50% 50% 0 0;
  width: 270px;
  height: 350px;
  position: relative;
  color: #222; /* 将阴影颜色绑定到currentColor */
  box-shadow: 
    -1px 1px 0, -2px 2px 0, -3px 3px 0, -4px 4px 0, -5px 5px 0,
    -6px 6px 0, -7px 7px 0, -8px 8px 0, -9px 9px 0, -10px 10px 0,
    -11px 11px 0, -12px 12px 0, -13px 13px 0, -14px 14px 0, -15px 15px 0,
    -16px 16px 0, -17px 17px 0, -18px 18px 0, -19px 19px 0, -20px 20px 0;
}

这种方式保留了原有的多层阴影逻辑，只是去掉了重复的颜色和冗余参数。

二、用CSS预处理器自动生成阴影 #

如果项目允许使用Sass/Less这类预处理器，可以通过循环自动生成所有阴影层，彻底避免手动重复书写：

Sass 实现 #

html {
  padding: 40px;
}
.arch {
  transition: all 250ms ease-in 0s;
  background: orange;
  border-radius: 50% 50% 0 0;
  width: 270px;
  height: 350px;
  position: relative;
  
  // 循环生成1到20层阴影
  $shadow-list: ();
  @for $i from 1 through 20 {
    $shadow-list: append($shadow-list, -#{$i}px #{$i}px 0 #222, comma);
  }
  box-shadow: $shadow-list;
}

Less 实现 #

html {
  padding: 40px;
}
.arch {
  transition: all 250ms ease-in 0s;
  background: orange;
  border-radius: 50% 50% 0 0;
  width: 270px;
  height: 350px;
  position: relative;
  
  // 递归循环生成阴影
  .generate-shadow(@count, @index: 1) when (@index <= @count) {
    box-shadow+: -@index*1px @index*1px 0 #222;
    .generate-shadow(@count, @index + 1);
  }
  .generate-shadow(20);
}

预处理器会在编译时自动生成你原来的20层box-shadow代码，开发时只需要调整循环次数或阴影参数即可。

三、原生CSS替代方案：用伪元素模拟3D阴影 #

如果你想彻底摆脱多层box-shadow，可以用伪元素配合渐变和变换实现类似效果，代码量大幅减少：

html {
  padding: 40px;
}
.arch {
  transition: all 250ms ease-in 0s;
  background: orange;
  border-radius: 50% 50% 0 0;
  width: 270px;
  height: 350px;
  position: relative;
}
.arch::before {
  content: '';
  position: absolute;
  top: 0;
  left: -20px;
  width: 20px;
  height: 100%;
  background: linear-gradient(to right, #222 0%, transparent 100%);
  transform: skewY(45deg);
  transform-origin: top left;
}

这种方法通过斜切的渐变伪元素模拟了多层阴影叠加的视觉效果，代码更简洁，且性能更优。

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