如何用CSS实现对话框的复制叠加视觉效果（无需复制元素）？

当然可以！不用重复复制对话框元素，通过多层box-shadow或者伪元素就能实现这种倾斜叠加的视觉效果，下面提供两种实用方案：

方案一：多层box-shadow快速实现 #

利用CSS的box-shadow支持多组阴影的特性，配合容器的倾斜变换，只需要几行代码就能模拟多层叠加效果：

.dialog {
  position: relative;
  width: 240px;
  padding: 24px;
  background: #ffffff;
  border-radius: 8px;
  /* 基础倾斜效果 */
  transform: skew(-6deg);
  /* 多层阴影模拟叠加层，每层偏移量递增、颜色加深 */
  box-shadow: 
    4px 4px 0 #e6e6e6,
    8px 8px 0 #d9d9d9,
    12px 12px 0 #cccccc;
}

优点： #

• 代码极简，无需额外元素
• 支持任意层数的叠加，只需继续添加阴影参数

方案二：伪元素实现可定制化叠加 #

如果需要给每个叠加层设置独立样式（比如不同边框、渐变背景），可以用::before和::after伪元素，配合transform和z-index控制层级：

.dialog {
  position: relative;
  width: 240px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  transform: skew(-6deg);
  z-index: 3; /* 确保原对话框在最上层 */
}

/* 第一层叠加层 */
.dialog::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #e6e6e6;
  border-radius: 8px;
  transform: skew(-6deg) translate(4px, 4px);
  z-index: -1; /* 放到原元素下方 */
}

/* 第二层叠加层 */
.dialog::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #d9d9d9;
  border-radius: 8px;
  transform: skew(-6deg) translate(8px, 8px);
  z-index: -2; /* 层级再降低 */
}

优点： #

• 每个叠加层可单独设置样式（如边框、渐变、透明度）
• 避免复制冗余元素，结构更简洁

注意事项： #

1. 容器必须设置position: relative，确保伪元素或阴影的定位基准正确
2. 所有元素的skew值要保持一致，避免倾斜效果错位
3. 调整阴影/伪元素的translate偏移量时，建议按固定比例递增，保证叠加的层次感

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