CSS 盒阴影消失

Question

我正在尝试实现以下网站中看到的第二种效果：http://cssdeck.com/labs/different-css3-box-shadows-effects 目前，我能够正确地执行此操作，但当我向页面添加任何其他HTML内容时，效果会消失。以下是一个包含我的进展的示例 fiddle：http://jsfiddle.net/aHrB7/ HTML 的一部分：

<div class="header">
    <img id="imgLogo" src="http://iconpacks.mozdev.org/images/firefox2005-icon.png" width=30px height=20px  /> 

    <div class="divContentSizer">
   <span class="spnName">Master Chief</span> <!-- End spnName -->
</div> 

<div class="clearfix"></div> <!-- End clearfix -->
  </div>

这是我使用的CSS代码：

这里是我用来实现该效果的CSS代码：

.clearfix {
   *zoom: 1;
}

.clearfix:before,
.clearfix:after {
   display: table;
   content: "";
   line-height: 0;
}

.clearfix:after {
   clear: both;
}

.header {
   position: relative;
   width: 100%;
   background: #fff;
   padding-top: 10px;
   padding-bottom: 10px;
}

.header:before, .header:after {
   z-index:-1;
   position: absolute;
   display:table;
   content: "";
   top:30px;
   left: 10px;
   width: 50%; 
   padding: .3em .3em;
   max-width:300px;
   background: rgba(0, 0, 0, 0.2); 
   -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.2);   
   -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2);
   box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(-3deg);    
  -moz-transform: rotate(-3deg);   
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

.header:after  {
   -webkit-transform: rotate(3deg);
   -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

#imgLogo {
float: left;
padding-left:30px;
}

.divContentSizer {
text-align: center;
vertical-align: middle;
width: 960px;
margin: 0 auto;
}

.spnName {
padding-top: 3px;
font-size: 1.5em;
color: #273137;
}

这是我想让盒子阴影显示出来的类，我已经注释了该删除哪一部分才能再次看到效果。

有谁知道为什么会出现这种情况，以及我应该怎么做才能解决它？任何见解都会很有帮助！谢谢！

- AtlanteanTec

---

我觉得 div 的定位可能有问题。box-shadow 应该是被正确应用了的。 - AnaMaria

Answer 1

将z-index设置为您的容器，这似乎可以解决问题。

.container{
    z-index:0;
    position: relative;
}

- omma2289

Answer 2

据我所知，这是因为 .header 没有生成自己的 层叠上下文（因为它的 z-index 是 auto），所以使阴影的伪元素具有 z-index: 1 意味着它们在 body 的后面堆叠。如果 .header 是 body 中唯一的内容，则 body 只有与 .header 一样高，并且不会完全隐藏阴影，但当它变得更高时，就会发生这种情况。

为了防止 body 用其背景遮挡阴影，可以使用以下技巧：将其背景设置为透明，并仅将主要背景设置为根元素。

html {
    background: #f9f8f8;
}

body {
    background: transparent;
}

您可以在这个示例中看到结果。

- Ilya Streltsyn

---

谢谢，Ilya。在找到你的帖子之前，我花了很多时间试图弄清楚这个问题。 - sehummel