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

Question

我想创建类似以下屏幕截图的内容，但是我无法找出在第一个或第二个框上都没有阴影的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

Answer 1

如果可以使用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>