如何避免重叠元素的box-shadow阴影累积叠加效果？

当两个元素重叠且都设置相同box-shadow时，相交区域的阴影会叠加变深，以下是几种可行的解决方法：

方法1：把阴影统一加在父容器上 #

给两个元素套一个父容器，只给父容器设置box-shadow，子元素不再单独加阴影。这样不管子元素怎么重叠，整体只会有一层阴影，不会出现叠加的情况。

示例代码：

<div class="parent">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

.parent {
  position: relative;
  box-shadow: 1px 1px 5px 1px gray;
  /* 父容器尺寸要能完全包含两个子元素 */
  width: 50px;
  height: 75px;
}

.div1,.div2 {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: white;
}

.div2 {
  top: 25px;
  background-color: green;
}

方法2：用filter: drop-shadow替代box-shadow #

drop-shadow是基于元素的整体轮廓（包括透明区域）生成阴影，而box-shadow是针对元素的盒模型添加阴影。当两个元素重叠时，drop-shadow会把它们当成一个整体渲染阴影，自然不会出现叠加问题。

修改后的CSS代码：

.div1,.div2 {
  width: 50px;
  height: 50px;
  filter: drop-shadow(1px 1px 5px 1px gray);
  position: absolute;
  background-color: white;
}

.div2 {
  top: 25px;
  background-color: green;
}

注意：drop-shadow的参数和box-shadow类似，但不支持inset内阴影，多阴影的spread值写法也有差异，需要根据实际需求调整。

方法3：给上层元素移除或调整阴影 #

如果不需要上层元素显示阴影，直接给它去掉box-shadow即可；如果需要保留部分阴影，可以调整阴影的位置、透明度，避免和下层阴影叠加。

示例（移除上层元素阴影）：

.div1,.div2 {
  width: 50px;
  height: 50px;
  box-shadow: 1px 1px 5px 1px gray;
  position: absolute;
  background-color: white;
}

.div2 {
  top: 25px;
  background-color: green;
  box-shadow: none; /* 移除上层元素的阴影 */
}

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