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

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