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

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>

Answer 4

更清洁的解决方案是将box-shadow添加到伪元素（例如::before或::after），然后将position:relative添加到父元素。

#box-one
{
  left: -50px;
}

#box-two
{
  right: -50px;
}

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

.box-container
{
    position: relative;
    z-index: 2;
}

.box
{
  background: white;
  width: 200px;
  height: 200px;
  margin: auto;
  position: relative;
}

.box::after
{
  content: "";
  box-shadow: 0 0 20px black;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

<div class="box-container">
  <div id="box-one" class="box"></div>
  <div id="box-two" class="box"></div>
</div>