CSS盒子阴影问题

Question

hi iam试图创建阴影以在另一个盒子内部的盒子，但没有得到我想要的

<div class="box effect2">
    <div class="box effect2">
        box inside box
    <div>
<div>

CSS样式

.box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}

    .effect2
    {
      position: relative;
    }
    .effect2:before, .effect2:after
    {
      z-index: -1;
      position: absolute;
      content: "";
      bottom: 15px;
      left: 10px;
      width: 50%;
      top: 80%;
      max-width:300px;
      background: #777;
      -webkit-box-shadow: 0 15px 10px #777;
      -moz-box-shadow: 0 15px 10px #777;
      box-shadow: 0 15px 10px #777;
      -webkit-transform: rotate(-3deg);
      -moz-transform: rotate(-3deg);
      -o-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
      transform: rotate(-3deg);
    }
    .effect2:after
    {
      -webkit-transform: rotate(3deg);
      -moz-transform: rotate(3deg);
      -o-transform: rotate(3deg);
      -ms-transform: rotate(3deg);
      transform: rotate(3deg);
      right: 10px;
      left: auto;
    }

我尝试了此代码，但没有成功。请告诉我我是否做错了什么？我从CSS技巧网站

Answer 1

将我的评论变成答案。两个阴影都在那里，您将z-index设置为-1，因此阴影落在所有事物下。

.box {
  width: 70%;
  height: 200px;
  background: #FFF;
  margin: 40px auto;
}
.effect2, .effect3 {
  position: relative;
}
.effect2:before,
.effect2:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width: 300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
.effect3:before,
.effect3:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width: 300px;
  background: #cc0000;
  -webkit-box-shadow: 0 15px 10px #cc0000;
  -moz-box-shadow: 0 15px 10px #cc0000;
  box-shadow: 0 15px 10px #cc0000;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

<div class="box effect2">
  <div class="box effect3">
    box inside box
  </div>
</div>

我在内部框中添加了另一个类，以便您可以看到正在发生的事情。另外，由于z indexes，您将很难为孩子和父元素设置这种滴影片。

编辑***这是您要寻找的解决方案。我必须添加另一个元素：

.box1 {
  background: #fff;
  width: 400px;
  height: 400px;
  position: relative;
}
.wrap {
  position: relative;
  z-index: 5;
}
.box2 {
  background: #ccc;
  width: 200px;
  height: 200px;
  margin: 10px;
  position: absolute;
}
.effect1:before,
.effect1:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width: 300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}
.effect1:after {
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
.effect2:before,
.effect2:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width: 300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}
.effect2:after {
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

<div class="box1 effect1">
  <div class="wrap">
    <div class="box2 effect2">my box</div>
  </div>
</div>

解决方案小提琴：https：//jsfiddle.net/9nqcx28a/8/