如何为两个区块实现组合式box-shadow效果（模拟父元素阴影）

我有两个独立区块，没法给它们的父元素设置统一的box-shadow，得单独给每个区块设置阴影，让视觉效果跟给父元素加阴影一模一样。

当前代码（问题：两个区块各自的阴影在衔接处重叠，视觉上不像一个整体）：

body {
  padding: 50px;
}

.block1 {
  padding: 20px;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-radius: 4px 4px 0 0;
  border-color: #d5dce3;
  box-shadow: 0 0 2px #00000017,0 5px 25px #0000000a,0 1px 5px #040b170a;
}

.block2 {
  padding: 20px;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  border-radius: 0 0  4px 4px;
  border-color: #d5dce3;
  box-shadow: 0 0 2px #00000017,0 5px 25px #0000000a,0 1px 5px #040b170a;
}

<div class="block1">
  Block 1
</div>
<div class="block2">
  Block 2
</div>

预期效果：

解决方案 #

核心思路是限制每个区块的阴影范围，避免衔接处重叠：

• 顶部区块.block1只保留上、左、右方向的阴影，移除底部阴影
• 底部区块.block2只保留下、左、右方向的阴影，移除顶部阴影

调整后的CSS代码：

body {
  padding: 50px;
}

.block1 {
  padding: 20px;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-radius: 4px 4px 0 0;
  border-color: #d5dce3;
  /* 仅保留上、左、右阴影，消除底部方向的阴影扩散 */
  box-shadow: 0 0 2px #00000017, 
              0 -5px 25px #0000000a, 
              -1px 0 5px #040b170a, 
              1px 0 5px #040b170a, 
              0 -1px 5px #040b170a;
}

.block2 {
  padding: 20px;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  border-radius: 0 0 4px 4px;
  border-color: #d5dce3;
  /* 仅保留下、左、右阴影，消除顶部方向的阴影扩散 */
  box-shadow: 0 0 2px #00000017, 
              0 5px 25px #0000000a, 
              -1px 0 5px #040b170a, 
              1px 0 5px #040b170a, 
              0 1px 5px #040b170a;
}

调整后两个区块的阴影会无缝衔接，视觉上完全等同于给父元素添加了统一的阴影效果。

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