CSS Box 阴影覆盖之前的 div 阴影

Question

在下面第一个框的示例中，我为外部 Div 提供了框阴影，它看起来不错。我可以通过给内部 Div 提供阴影(在第二个框中)来获得类似的外观吗？我需要这个，因为如果我单击任何内部 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>