css – 同一级别的多个元素上的框阴影但没有重叠？

我想创建类似于以下屏幕截图的内容,但我无法弄清楚任何z-index值,阴影不会出现在第一个或第二个框中(它们总是堆叠在一起,第一个在顶部,或者第二个).

有没有办法实现以下目标？

body { background: darkgrey; padding-top: 50px}
div { background: white; width: 200px; height: 200px; Box-shadow: 0 0 20px 
black; margin: auto; position: relative; }
#Box-one { left: -50px; z-index: 1; }
#Box-two { right: -50px; z-index: 1; }

https://codepen.io/eoghanmurray/pen/oVEEVK

解决方法

如果可以使用 filter和 drop-shadow,则可以将阴影应用于容器.这个阴影不同,因为它符合图像的alpha通道(在这种情况下,内容的轮廓)而不是简单的矩形：

body {
  background: darkgrey;
  padding-top: 50px
}

#Box-one,#Box-two {
  background: white;
  width: 200px;
  height: 200px;
  margin: auto;
  position: relative;
}

#Box-one {
  left: -50px;
  z-index: 1;
}

#Box-two {
  right: -50px;
  z-index: 1;
}

#top {
  filter: drop-shadow(0 0 20px black);
}

<div id="top">
  <div id="Box-one"></div>
  <div id="Box-two"></div>
</div>