Question

我有一个CSS3 Shadows的问题，我之前没有考虑过。它似乎是一个盒子阴影，通过：before和：after选择器应用于div，只有div的容器没有背景颜色设置才可以。

有没有办法让这成为可能？

<div class="container">    
    <div class="shadow-box">
        test
    </div>
</div>

.container不得设置背景颜色。我在http://jsfiddle.net/v1utr15n/

上创建了一个示例

Answer 1

您需要确保.container将启动新的堆叠订单。您可以通过设置position: relative; z-index: 0或不透明度不是1来实现此目的，例如opacity: .9999。

＆＃13;

.container {
  background-color: #fff;
  height: 500px;
  position: relative;
  z-index: 0;
}
.shadow-box {
  background-color: #fff;
  position: relative;
  width: 300px;
  height: 300px;
}
.shadow-box:before,
.shadow-box:after {
  content: "";
  position: absolute;
  z-index: -1;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  top: 50%;
  bottom: 0;
  left: 10px;
  right: 10px;
  -moz-border-radius: 100px / 10px;
  border-radius: 100px / 10px;
}

＆＃13;

<div class="container">
  <div class="shadow-box">
    test
  </div>
</div>

＆＃13;

有关z-index和堆叠顺序上下文的一些背景信息，请参阅http://philipwalton.com/articles/what-no-one-told-you-about-z-index/。

Answer 2

将box-shadow的代码放在阴影框类中，而不是放在之前或之后。

网址：http://jsfiddle.net/v1utr15n/1/

.container {
  background-color: #fff;
  height: 500px;
}
.shadow-box {
  background-color: #fff;
  position: relative;
  width: 300px;
  height: 300px;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}
.shadow-box:before,
.shadow-box:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  bottom: 0;
  left: 10px;
  right: 10px;
  -moz-border-radius: 100px / 10px;
  border-radius: 100px / 10px;
}

<div class="container">
  <div class="shadow-box">
    Shadow box
  </div>
</div>

CSS3：只有父背景的阴影

2 个答案: