CSS BOX SHADOW ISSUE

Question

嗨，我试图在另一个盒子里面制作阴影，但没有得到我想要的东西

<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，因此阴影属于所有阴影。

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我在内部框中添加了另一个类，以便您可以看到发生了什么。此外，由于z索引，您将很难将此样式的投影设置为子元素和父元素。

EDIT *** 以下是您正在寻找的解决方案。我不得不添加另一个元素：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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