我正在尝试实现效果编号 2,如以下站点所示: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:
.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 是我试图让框阴影显示的内容,我已经评论了要删除的部分以再次显示效果。
有谁知道为什么会发生这种情况以及我可以做些什么来解决它?任何见解都会有所帮助!请谢谢!
最佳答案
为您的容器设置一个 z-index,这似乎可以解决问题
.container{
z-index:0;
position: relative;
}
关于html - CSS Box 阴影消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17669144/