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的盒子阴影问题

回答

相关问题