如何隐藏两个相邻div之间的阴影

Question

我有两个 div 彼此重叠（相邻），它们作为一个单元的展位应该有一个盒子阴影。现在上面的 div 在下面的 div 上有阴影，这是我不想要的。我试图用 "z-index:2" 来操纵它以使其更靠前但没有运气。

我想隐藏上部的底部阴影div和隐藏下部的顶部阴影div

我也不希望阴影折叠到相邻的边上。两个div应该是一个单元一个影子

在我的示例中，我简化了 html

<div class="upper-box" style="width:100px;height:100px;">
</div>
<div class="lower-div" style="width:100px;height:100px;">
</div>

在 jsfiddle 中，css 都是原始的，这里进行所有更改工作。

.upper-box {
    border-top: 0 none;
    margin-bottom: 2px;
    margin-top: -2px;
    overflow: auto;
    position: relative;
    padding-top: 0;

    /* Expanded panel gets emphasized by a shadow */
    box-shadow: 0px 6px 50px 7px rgba(255,255,255,0.75),
                0px 6px 50px 7px rgba(88,88,88,0.75),
                0px 6px 50px 7px rgba(88,88,88,0.75),
                0px 6px 50px 7px rgba(88,88,88,0.75)
                ;
    z-index: 3;
    border-style: solid;
    border-color: #000000;
    border-width: 0px;
    position: relative;
 }    

 .lower-div {
    border-bottom: 0px;

    box-shadow: 0px 6px 50px 7px rgba(88,88,88,0.75);
    z-index: 2;
    border-style: solid;
    border-color: #000000;
    border-width: 0px;
}

我想隐藏上部的底部阴影div和隐藏下部的顶部阴影div

我也不希望阴影折叠到相邻的边上。两个div应该是一个单元一个影子

这是我的现场演示

https://jsfiddle.net/y289sdeb/

Answer 1

你可以使用伪元素，像这样

.upper-box {
  position: relative;
  width: 100px;
  height: 100px;
  background: white;
}
.lower-div {
  position: relative;
  width: 100px;
  height: 100px;
  background: white;
}
.upper-box::after,
.lower-div::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0px 6px 50px 7px rgba(88, 88, 88, 0.75);
  z-index: -1;
}

<div class="upper-box">

</div>

<div class="lower-div">

</div>

根据评论，可以使用包装器

.wrapper {
  position: relative;
  display: inline-block;
}
.upper-box {
  position: relative;
  width: 100px;
  height: 100px;
}
.lower-div {
  position: relative;
  width: 100px;
  height: 100px;
}
.wrapper::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0px 6px 50px 7px rgba(88, 88, 88, 0.75);
  z-index: -1;
}

<div class="wrapper">
  
  <div class="upper-box">

  </div>

  <div class="lower-div">

  </div>
  
</div>

如何隐藏两个相邻div之间的阴影

How to hide shadow between two adjoined divs

html

css

box-shadow