Question

我正在尝试实施第2号效果，如以下网站所示：http://cssdeck.com/labs/different-css3-box-shadows-effects

到目前为止，我能够做到这一点，但是当我向页面添加更多html内容时，效果会消失。以下是我到目前为止的示例：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：

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

标题类div是我想要显示框阴影的内容，我已经评论要删除哪个部分以查看效果再次显示。

有谁知道为什么会发生这种情况以及我可以采取哪些措施来解决这个问题？任何见解都会有所帮助！拜托，谢谢！

Answer 1

据我了解，这是因为.header不生成自己的stacking context（因为它的z-index为auto），所以z-index: 1为伪制作阴影的元素意味着它们堆叠在body后面。如果.header是body的唯一内容，则body只会与.header一样高，并且不会完全隐藏阴影，但是当它变得更高时，它确实会隐藏阴影。

为防止body隐藏阴影及其背景，您可以执行以下操作：使其背景透明并仅将主背景设置为根元素。

html {
    background: #f9f8f8;
}

body {
    background: transparent;
}

您可以看到in this fiddle的结果。

Answer 2

为容器设置z-index，这似乎解决了问题

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

CSS Box阴影消失了

2 个答案: