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是透明的，因此它们显示了周围的整个框阴影。我在下面的代码段中添加了白色背景。

您仍然可以在顶部看到一个小阴影，这是因为随后的每个div都覆盖了它之前的div。我建议使用较浅的框阴影，或将其向下移动几个像素以使其不那么可见，然后将其移动到选定的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>

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

2 个答案: