Question

我有一个看起来像这样的页面：

box-shadow http://www.morninj.com/images/box-shadow-screenshot.png

中间div（“Quotation。”作为其内容）应用了box-shadow属性。出于某种原因，如果第三个div存在，阴影将不会出现在第二个div下方。有人知道为什么吗？

HTML：

<div id="header">
    <h1>Title</h1>
</div><!--/#header-->
<div id="subheader">
    <h2>"Quotation."</h2>
</div><!--/#subheader-->
<div id="blurb">
    <div id="blurb-container">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div><!--/#blurb-container-->
</div><!--/#blurb-->

CSS：

div#header {
    background-color: #444;
    padding: 20px 0;
}

    div#header h1 {
        color: #fff;
        font-family: 'Arvo', sans-serif;
        font-size: 50px;
        font-weight: bold;
        text-align: center;
        text-shadow: 1px 1px 1px #000;
    }

div#subheader {
    background-color: #777;
    box-shadow: 0 0 3px 2px #333;
    padding: 10px;
}

    div#subheader h2 {
        color: #efefef;
        font-family: 'Merriweather', serif;
        font-size: 14px;
        font-style: italic;
        line-height: 24px;
        text-align: center;
    }

div#blurb {
    background-color: #efefef;
    padding: 20px;
}

    div#blurb div#blurb-container {
        margin: 0 auto;
        width: 800px;
    }

Answer 1

你的'模糊'掩盖了它。将div#blurb css规则编辑为以下内容，将其移到阴影div后面：

div#blurb {
    background-color: #efefef;
    padding: 20px;
    position:relative;
    z-index:-1;
}

Answer 2

将两个元素的位置设置为relative，将第一个元素的z-index设置为1，将下一个元素的z-index设置为0.

编辑：是的，允许负值:)。但它们在firefox 2中不起作用。

box-shadow不会显示在div的底部

2 个答案: