CSS3的盒子阴影问题

4
当我在开发网页时,我发现使用box-shadow功能出了问题。我想要为整个页面包裹器添加一个box-shadow,其中包含标题、导航、内容和页脚。导航和内容是并排的元素。问题在于,当我将box-shadow添加到#wrapper时,它只出现在标题上,如我在这里复制所示。我能够通过使用具有display: table-cell属性的并排元素来修复它,但它破坏了页面的其余部分,因此我想知道如何解决这个问题。

1
你需要清除浮动,它们不占用空间。 - TheZ
3个回答

6
overflow:hidden添加到您的包装器中,如此处所示。它将强制容器包装浮动元素。
[编辑]无需添加额外的标记...

5

因为你将元素向左浮动,所以请使用 CSS clear:both;,可以查看这个示例:我的示例


0

你可以不用包装器,而是创建一个与其大小和位置相同的独立

元素,并给它添加一个盒子阴影。将高度更改为所需值,只需计算出要添加阴影的内容的高度即可。

<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-->

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接