如何使用HTML/CSS/SCSS实现卡片div的多层Box Shadow效果

方案1：纯CSS box-shadow 实现（推荐，无需额外DOM元素） #

CSS的box-shadow原生支持多值叠加，用逗号分隔每一层的阴影参数即可，是实现这类错落偏移阴影最简单的方式，不需要新增额外的DOM节点：

<div class="card">卡片内容区域</div>

.card {
  width: 300px;
  height: 400px;
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 12px;
  /* 按顺序叠加多层阴影，每层分别偏移2px */
  box-shadow: 2px 2px 0 #000000,
              4px 4px 0 #000000,
              6px 6px 0 #000000,
              8px 8px 0 #000000,
              10px 10px 0 #000000;
}

方案2：SCSS循环生成动态阴影 #

如果需要灵活调整阴影层数、每层偏移距离、阴影颜色，用SCSS循环自动生成阴影值更高效，不需要手动编写每一层的参数：

// 自定义阴影配置
$shadow-layer-count: 5; // 阴影层数
$per-layer-offset: 2px; // 每层相对上一层的偏移距离
$shadow-color: #000000; // 阴影颜色

// 循环生成多层阴影值
$shadow-list: ();
@for $i from 1 through $shadow-layer-count {
  $current-offset: $i * $per-layer-offset;
  $shadow-list: append($shadow-list, $current-offset $current-offset 0 $shadow-color, comma);
}

.card {
  width: 300px;
  height: 400px;
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 12px;
  box-shadow: $shadow-list;
}

方案3：叠加div实现（仅适合特殊需求场景） #

如果确实需要通过多层DOM节点实现效果，可以参考如下SCSS代码：

<div class="card">
  卡片内容区域
  <div class="shadow-layer"></div>
  <div class="shadow-layer"></div>
  <div class="shadow-layer"></div>
  <div class="shadow-layer"></div>
  <div class="shadow-layer"></div>
</div>

.card {
  position: relative;
  width: 300px;
  height: 400px;
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 12px;
  z-index: 1;

  .shadow-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: #000000;
  }
  // 循环为每一层阴影设置偏移和层级
  @for $i from 1 through 5 {
    .shadow-layer:nth-child(#{$i + 1}) {
      z-index: -$i;
      transform: translate(#{$i * 2px}, #{$i * 2px});
    }
  }
}

扩展交互效果 #

如果需要添加hover动效，仅需给卡片添加过渡属性即可实现丝滑的位移效果：

.card {
  transition: all 0.2s ease;
}
.card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 #000000,
              8px 8px 0 #000000,
              12px 12px 0 #000000,
              16px 16px 0 #000000,
              20px 20px 0 #000000;
}

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