当我在开发网页时,我发现使用box-shadow功能出了问题。我想要为整个页面包裹器添加一个box-shadow,其中包含标题、导航、内容和页脚。导航和内容是并排的元素。问题在于,当我将box-shadow添加到#wrapper时,它只出现在标题上,如我在这里复制的所示。我能够通过使用具有display: table-cell属性的并排元素来修复它,但它破坏了页面的其余部分,因此我想知道如何解决这个问题。
你可以不用包装器,而是创建一个与其大小和位置相同的独立
<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-->