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

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 channel (在本例中为内容的轮廓)而不是简单的矩形:

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>