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

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 and 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>

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

box shadows on multiple elements at same level but without overlap?

css

box-shadow

css-filters