如何用CSS实现阶梯（Staircase）效果？已尝试box-shadow未成功

嘿，我完全get你说的这种阶梯式（Staircase）分层效果！之前我也折腾过box-shadow，确实搞不定——毕竟它只是投影，没法做出真正的层级错位感。给你分享两种简单靠谱的实现思路：

方法一：单元素+伪元素快速实现 #

这种方法不用额外HTML结构，靠CSS伪元素就能做出基础的阶梯效果，适合层级不多的场景：

.staircase {
  position: relative;
  width: 220px;
  height: 70px;
  background: #4285f4;
  color: #fff;
  line-height: 70px;
  text-align: center;
  font-size: 18px;
}

/* 第一层阶梯 */
.staircase:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #3367d6;
  z-index: -1;
  transform: translate(12px, 12px);
}

/* 第二层阶梯 */
.staircase:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #2952cc;
  z-index: -2;
  transform: translate(24px, 24px);
}

原理很简单：通过绝对定位的伪元素，把它们的层级（z-index）设得比主元素低，再用transform: translate()让每个伪元素向右下偏移不同距离，配合渐变的背景色，就能模拟出阶梯分层的视觉效果。

方法二：嵌套元素实现更灵活的层级 #

如果需要更多阶梯层级，或者要单独控制每一层的样式，用嵌套div的方式更灵活：

HTML结构 #

<div class="stair-wrapper">
  <div class="step">阶梯效果示例</div>
  <div class="step"></div>
  <div class="step"></div>
  <div class="step"></div>
</div>

CSS样式 #

.stair-wrapper {
  position: relative;
  width: 220px;
}

.step {
  position: absolute;
  width: 100%;
  height: 70px;
  left: 0;
  top: 0;
}

/* 最上层（内容层） */
.step:first-child {
  background: #4285f4;
  color: #fff;
  line-height: 70px;
  text-align: center;
  font-size: 18px;
  z-index: 0;
}

/* 第二层阶梯 */
.step:nth-child(2) {
  background: #3367d6;
  transform: translate(12px, 12px);
  z-index: -1;
}

/* 第三层阶梯 */
.step:nth-child(3) {
  background: #2952cc;
  transform: translate(24px, 24px);
  z-index: -2;
}

/* 第四层阶梯 */
.step:nth-child(4) {
  background: #1e3b99;
  transform: translate(36px, 36px);
  z-index: -3;
}

这种方式可以轻松增加或减少阶梯层数，还能给每一层设置不同的宽度、颜色甚至圆角，自由度更高。

如果你想要斜向的单边阶梯（比如只有右侧有阶梯），还可以结合clip-path裁剪元素形状，不过上面两种方法已经能覆盖大部分场景啦～

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