如何制作两个块的组合框阴影？

Question

我有两个街区。让我们想象一下，不可能将一个 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>

想要的外观：

Answer 1

使用外部

div

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

...并为其定义CSS：

.shadow {
  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;
}