CSS盒子陰影消失

我想實現的效果號碼2從以下網站看到：http://cssdeck.com/labs/different-css3-box-shadows-effects CSS盒子陰影消失

到目前爲止，我能做到這一點porperly，但是當我更多的HTML內容添加到頁面中，效果消失。下面是一個簡單搗鼓什麼，我至今：在HTML的http://jsfiddle.net/aHrB7/

部分：

<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是我試圖讓盒子陰影顯示出來的東西，我已經評論過哪些部分要刪除才能看到效果。

有誰知道爲什麼發生這種情況，我能做些什麼來解決它？任何見解都會有所幫助！謝謝，麻煩您了！

來源

2013-07-16 AtlanteanTec

我會說div的定位可能是一個問題。箱形陰影得到正確應用 – AnaMaria

據我瞭解，這是因爲.header不會產生自己的stacking context（因爲它的z-index爲auto ），所以z-index: 1對於產生陰影的僞元素意味着它們被堆疊在body之後。如果.header是body的唯一內容，則body只是與.header一樣高，並且不完全隱藏陰影，但是當它變得更高時，它會這樣做。

爲了防止body隱藏背景陰影，您可以執行以下技巧：使其背景透明並將主背景僅設置爲根元素。

html { 
    background: #f9f8f8; 
} 

body { 
    background: transparent; 
}

結果你可以看到in this fiddle。

來源

2013-07-16 07:47:19

這是做到了。非常感謝您的解釋！ – AtlanteanTec

謝謝，Ilya。你不知道我在找到你的帖子之前花了多少時間來解決這個問題。 – sehummel

設置的z-index到您的容器，這似乎是解決問題

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

來源

2013-07-16 06:43:18

CSS盒子陰影消失

回答

相關問題