CSS3的盒子陰影問題

當我開發我的網頁時，我發現使用盒子陰影功能的問題。CSS3的盒子陰影問題

我想添加一個盒子陰影到我的網頁，其中包含標題，導航，內容和頁腳的整個包裝。

導航和內容是並排元素。

的問題是，當我添加箱陰影到#wrapper指定，它僅出現在標題，如我再現here

我能夠通過用側面元件使用側以固定它display：table-cell propriety，但它破壞了頁面的其餘部分，所以我問我該如何解決這個問題。

來源

2012-07-24 Th3Alchemist

你需要清理你的花車，他們不佔用空間。 – TheZ 2012-07-24 19:59:06

添加overflow:hidden到您的包裝如圖所示here。它會迫使你的容器包裝浮動元素。

[編輯]，而無需添加額外的標記......

來源

2012-07-24 19:58:29 canon

謝謝！工作得很好！ – Th3Alchemist 2012-07-24 20:03:36

使用CSS clear:both;，因爲你是浮動元素的左邊，看看這個：my fiddle

來源

2012-07-24 19:58:27

，而不是一個包裝，你可以簡單地做出另一個單獨使用相同的大小和位置，並給它一個盒子陰影。將高度改爲任何你想要的，只要找出你想要隱藏的內容的高度即可。

<style> 
div.shadow { 
width: 400px; 
height: 100%; 
position:absolute; 
z-index:-99; 
box-shadow: 3px 3px 20px #999; 
-moz-box-shadow: 3px 3px 20px #999; 
-webkit-box-shadow: 3px 3px 20px #999; 
} 
</style> 
<body> 
<div class="shadow></div> 

<!-- everything else here-->

來源

2012-07-24 20:01:04

CSS3的盒子陰影問題

回答

相關問題