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

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>

Answer 2

您可以在父元素上考虑drop-shadow过滤器：

body {
  background: pink;
}

.b1,
.b2 {
  width: 150px;
  height: 150px;
  background: #fff;
}

.b2 {
  margin-left: 100px;
}
.container {
  filter:drop-shadow(0 0 10px #000);
}

<div class="container">
  <div class="b1"></div>
  <div class="b2"></div>
</div>

或者使用额外的元素来隐藏重叠的阴影：

body {
  background: pink;
}

.b1,
.b2 {
  width: 150px;
  height: 150px;
  background: #fff;
  box-shadow: 0 0 13px #000;
  position: relative;
}

.b2 {
  margin-left: 100px;
}

.b1:before,
.b2:before {
  content: "";
  position: absolute;
  bottom: 0px;
  right: 0;
  left: 0;
  height: 15px;
  background: inherit;
  z-index: 1;
}

.b2:before {
  top: 0;
  bottom: initial;
}

<div class="container">
  <div class="b1"></div>
  <div class="b2"></div>
</div>

您也可以只使用一个元素构建它：

body {
  background: pink;
}
.container {
  width:250px;
  height:300px;
  background:
     linear-gradient(#fff,#fff) top left,
     linear-gradient(#fff,#fff) bottom right;
   background-size:150px 150px;
  background-repeat:no-repeat;
  filter:drop-shadow(0 0 10px #000);
}

<div class="container">
</div>

Answer 3

我创建了一个新的div并为它设置了一些css。

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; }
#box-two { right: -50px;  }
#div1{
  position:absolute;
  background: white;
  width:100px;
  height:15px;
  margin-right:10px;
  box-shadow: none;
  margin-top:185px;
  margin-left:199px;
  content: '';
  z-index: 1
 

}

<div id="div1"></div>
<div id="box-one"></div>
<div id="box-two"></div>