我想创建类似以下屏幕快照的内容,但是我无法找出在第一个或第二个框上都没有阴影的z-index值(它们总是堆叠在一起,第一个框在顶部,或第二个)。
css - 处于同一级别但没有重叠的多个元素上的框阴影?-LMLPHP

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

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

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

最佳答案

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

10-07 19:07
查看更多