CSS效果实现选型：双层box-shadow还是后方叠加双矩形？

DevOps 小满

2026-8-27

多层偏移后置色块效果实现方案选择

效果示意图

两种方案都能实现图中的效果，核心差异在适用场景，可根据实际需求选择：

方案1：双`box-shadow`实现

这是静态效果下的首选方案：

不需要新增任何DOM节点，仅修改目标元素的CSS即可实现，代码最精简
色块会自动跟随元素尺寸变化，不需要额外做适配
调整偏移量、颜色只需要修改box-shadow属性值，维护成本极低
局限性：阴影是元素的渲染附属效果，无法给两层后置色块单独加动画、交互或者特殊样式（比如渐变、边框、旋转效果）

实现代码参考：

.target-card {
  width: 320px;
  height: 200px;
  background: #ffffff;
  /* 两层实色阴影，按书写顺序从近到远排列 */
  box-shadow: 7px 7px 0 #54c0eb, 14px 14px 0 #ffd166;
}

方案2：后置独立矩形实现

如果有自定义动效/样式需求选这个方案，优先用::before、::after伪元素实现，不需要加冗余真实DOM节点：

两层后置色块是独立渲染层，可以单独设置渐变、纹理、边框、旋转/缩放动画，甚至绑定交互事件（用真实DOM节点时支持）
局限性：如果用伪元素会占用元素的两个伪元素槽位，需要手动设置色块和主元素尺寸同步（一般设width:100%;height:100%即可自动跟随）

实现代码参考（伪元素版本）：

.target-card {
  width: 320px;
  height: 200px;
  background: #ffffff;
  position: relative;
  z-index: 1;
}
.target-card::before,
.target-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
.target-card::before {
  background: #54c0eb;
  translate: 7px 7px;
}
.target-card::after {
  background: #ffd166;
  translate: 14px 14px;
}