3

我正在尝试实施效果编号 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 是我试图让盒子阴影出现的原因，我已经评论了要删除的部分以再次显示效果。

有谁知道为什么会发生这种情况以及我能做些什么来解决它？任何见解都会有所帮助！谢谢，麻烦您了！

4

2 回答 2

6

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

.container{
    z-index:0;
    position: relative;
}
于 2013-07-16T06:43:18.860 回答
4

据我了解，这是因为.header它不会生成自己的堆叠上下文（因为它的 z-index 是auto），所以z-index: 1对于产生阴影的伪元素意味着它们堆叠在body. If.header是 的唯一内容body, bodyjust 和它一样高，.header并没有完全隐藏阴影，但是当它变得更高时，它会隐藏。

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

html {
    background: #f9f8f8;
}

body {
    background: transparent;
}

你可以在这个 fiddle中看到结果。

于 2013-07-16T07:47:19.850 回答