在开发网页时，我发现使用 box-shadow 功能存在问题。
我想在我的网页的整个包装器中添加一个框阴影，其中包含页眉、导航、内容和页脚。
导航和内容是并排的元素。
问题是，当我将 box-shadow 添加到#wrapper 时，它只出现在标题上，正如我在这里复制的那样
我能够通过将并排元素与显示一起使用来修复它：table-cell propety，但它破坏了页面的其余部分，所以我问我该如何解决这个问题。
问问题
1681 次
3 回答
6
添加到您的包装器，如此处overflow:hidden所示。它将强制您的容器包装浮动元素。
[编辑] 无需添加额外的标记...
于 2012-07-24T19:58:29.777 回答
5
使用 CSS clear:both;，因为您将元素浮动到左侧，请查看：我的小提琴
于 2012-07-24T19:58:27.717 回答
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-->
于 2012-07-24T20:01:04.440 回答