css - 无法让 CSS box-shadow 与固定的页眉和页脚一起使用

Question

我在 WP 4.0“Twenty Twelve”主题上构建了一个具有固定页眉、固定页脚和滚动主体的网站。

尝试在页眉灰色区域下方和页脚灰色区域上方应用 boxshadow，但两者都不起作用。让我们关注标题。基本 HTML/CSS 以简化形式按预期工作:http://jsfiddle.net/tvq5hw4r/

HTML:

<div id="menubar" class="shadow-below">
    <nav id="site-navigation" class="main-navigation" role="navigation">
Home | About | Contact
    </nav><!-- #site-navigation -->
</div><!-- #menubar -->

CSS:

#menubar {
    width:100%;
    height:1em;
    background-color: lightgray; 
    padding: .5em;
    color: white;
    box-sizing: content-box; 
}

.shadow-below {
    -webkit-box-shadow: 0 8px 6px -6px black;
       -moz-box-shadow: 0 8px 6px -6px black;
            box-shadow: 0 8px 6px -6px black;

/* For IE 8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

然而，我已经在多个操作系统(Vista Home Premium SP2、Android 4.4)上的多个浏览器(FF、Chrome、IE)中测试了实际网页，并且在任何组合上都没有看到预期的结果。

尝试通过连接到灰色区域的选择器，逐个 id 和逐个类，分配所需的样式。最多，我在文本下方得到阴影(但在灰色区域内，而不是在其下方)；在所有其他情况下，我没有得到任何阴影。

我还尝试从同一页面(在图像上)的工作阴影中获取样式代码，并在相关选择器上逐字使用该样式代码:仍然没有变化。

尝试使用我也创建的另一个网站的有效 CSS 样式:没有变化。

尝试过其他网站建议的代码(css-tricks 和 robertnyman- 无法发布完整链接):没有变化。

尝试在每个样式声明中添加“!important”:没有变化。

因为这不是浏览器问题或基本代码问题，所以它似乎是样式如何级联(或元素如何嵌套)或什至溢出或某些此类属性的问题？

Answer 1

尝试将 margin-bottom 赋给 .shadow-below

如

.shadow-below { margin-bottom:10px; }