Question

我有两个div在彼此的顶部（相邻），他们作为一个单位的摊位应该有一个盒子阴影。现在上面的div给了我不想要的下部div。我试图用＆＃34; z-index操作它：2＆＃34;更加重要，但没有运气。

我想隐藏上部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之间隐藏阴影

1 个答案: