CSS Box 阴影覆盖前一个 div 阴影

Question

在下面的第一个盒子示例中，我为外部 Div 赋予了盒子阴影，它看起来不错。我可以通过给内部 Divs （在第二个框中）提供阴影来获得类似的外观吗？这是我需要的，因为如果我单击任何内部 Div，我想将该 Div 与其他 Div 分开，如第三个 Box 所示。谢谢你

.my-shadow {
  width:500px;
  height:400px;
  margin:auto;
  margin-top:50px;
  box-shadow:0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12) !important
}

.my-inner-div {
  padding:20px;
}

.my-shadow2 {
  width:500px;
  height:400px;
  margin:auto;
  margin-top:50px;
 
}

.my-inner-div2 {
  padding:20px;
   box-shadow:0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12) !important
}

        <div style="float:left;margin-left:30px; ">
    <h1> First  </h1>
    
    <div class="my-shadow ">
      
      <div class="my-inner-div">
        This is test1
      </div>
      
      <div class="my-inner-div">
        This is test2
      </div>
      <div class="my-inner-div">
        This is test3
      </div>
      <div class="my-inner-div">
        This is test4
      </div>
      <div class="my-inner-div">
        This is test5
      </div>
      
    </div>
      </div>
    
    <div style="float:left; margin-left:50px;">
      <h1> Second  </h1>
    <div class="my-shadow2 ">
      
      <div class="my-inner-div2">
        This is test1
      </div>
      
      <div class="my-inner-div2">
        This is test2
      </div>
      <div class="my-inner-div2">
        This is test3
      </div>
      <div class="my-inner-div2">
        This is test4
      </div>
      <div class="my-inner-div2">
        This is test5
      </div>
      
    </div>
      </div>
    
    <div style="float:left; margin-left:50px;">
      <h1> Thrid  </h1>
    <div class="my-shadow2 ">
      
      <div class="my-inner-div2">
        This is test1
      </div>
      
      <div class="my-inner-div2" style="margin:20px">
        This is test2
      </div>
      <div class="my-inner-div2">
        This is test3
      </div>
      <div class="my-inner-div2">
        This is test4
      </div>
      <div class="my-inner-div2">
        This is test5
      </div>
      
    </div>
      </div>

Answer 1

您可以在放置在 div 下方的伪元素上使用阴影，不会有任何问题：

.my-inner-div {
  padding: 20px;
}

.my-shadow2 {
  width: 500px;
  margin: auto;
  margin-top: 50px;
  position:relative;
  z-index:0; /*to avoid side effect of stacking context, we make sure everything belong inside this div*/
}

.my-inner-div2 {
  padding: 20px;
  position:relative;
  background:#fff;
  transition:1s all;
}
.my-inner-div2:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
  box-shadow: 
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14), 
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
}

.my-inner-div2:hover {
  margin:20px;
}

<div class="my-shadow2 ">

    <div class="my-inner-div2">
      This is test1
    </div>

    <div class="my-inner-div2">
      This is test2
    </div>
    <div class="my-inner-div2">
      This is test3
    </div>
    <div class="my-inner-div2">
      This is test4
    </div>
    <div class="my-inner-div2">
      This is test5
    </div>

  </div>

Answer 2

div 是透明的，因此它们会在它们周围显示整个盒子阴影。我在下面的 sn-p 中添加了白色背景。

您仍然可以在顶部看到轻微的阴影，这是因为每个后续 div 都覆盖了它之前的 div。我建议使用较轻的 box-shadow，或者将其向下移动几个像素以使其不那么明显，然后将其移动到选定的 div 作为突出显示样式的一部分。

.my-shadow {
  width:500px;
  height:400px;
  margin:auto;
  margin-top:50px;
  box-shadow:0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12) !important
}

.my-inner-div {
  padding:20px;
}

.my-shadow2 {
  width:500px;
  height:400px;
  margin:auto;
  margin-top:50px;
 
}

.my-inner-div2 {
  padding:20px;
   box-shadow:0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12) !important;
   background: #fff;
}

        <div style="float:left;margin-left:30px; ">
    <h1> First  </h1>
    
    <div class="my-shadow ">
      
      <div class="my-inner-div">
        This is test1
      </div>
      
      <div class="my-inner-div">
        This is test2
      </div>
      <div class="my-inner-div">
        This is test3
      </div>
      <div class="my-inner-div">
        This is test4
      </div>
      <div class="my-inner-div">
        This is test5
      </div>
      
    </div>
      </div>
    
    <div style="float:left; margin-left:50px;">
      <h1> Second  </h1>
    <div class="my-shadow2 ">
      
      <div class="my-inner-div2">
        This is test1
      </div>
      
      <div class="my-inner-div2">
        This is test2
      </div>
      <div class="my-inner-div2">
        This is test3
      </div>
      <div class="my-inner-div2">
        This is test4
      </div>
      <div class="my-inner-div2">
        This is test5
      </div>
      
    </div>
      </div>
    
    <div style="float:left; margin-left:50px;">
      <h1> Thrid  </h1>
    <div class="my-shadow2 ">
      
      <div class="my-inner-div2">
        This is test1
      </div>
      
      <div class="my-inner-div2" style="margin:20px">
        This is test2
      </div>
      <div class="my-inner-div2">
        This is test3
      </div>
      <div class="my-inner-div2">
        This is test4
      </div>
      <div class="my-inner-div2">
        This is test5
      </div>
      
    </div>
      </div>