CSS box-shadow出现重叠而非覆盖现象，仅修改元素样式如何解决？

解决方案 #

场景1：两个盒子完全重叠（即当前示例的场景）

DOM顺序靠后的.b默认层级高于.a，仅保留任意一个盒子的阴影即可，直接移除多余的阴影就能避免重叠加深：

/* 两种方案二选一即可，效果完全一致 */
.a {
  box-shadow: none;
}

/* 或者 */
.b {
  box-shadow: none;
}

场景2：两个盒子部分重叠（后续设置了偏移值没有完全重合的情况）

给两个盒子设置和父容器一致的实色背景，再通过z-index明确层级，上层盒子的实色背景会挡住下层盒子延伸到重叠区域的阴影，不会出现阴影叠加的问题：

.a {
  z-index: 1;
  background-color: #fff; /* 替换为父容器实际使用的背景色 */
}
.b {
  z-index: 2;
  background-color: #fff; /* 替换为父容器实际使用的背景色 */
}

内容的提问来源于stack exchange，提问作者jw.h