无法使CSS box-shadow使用固定页眉和页脚

我在WP 4.0“Twenty Twelve”主题上建立了一个固定页眉，固定页脚和滚动页面的网站。无法使CSS box-shadow使用固定页眉和页脚

试图在标题的灰色区域和页脚的灰色区域之下应用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'); 
}

不过，我已经在多个浏览器测试的实际网页（FF ，Chrome，IE）在多个操作系统上（Vista Home Premium SP2，Android 4.4），并且在任何组合上都看不到所需的结果。

已尝试通过连接到灰色区域的选择器，按id编号和class按类别分配所需的样式。我最多可以在文本下方看到阴影（但在灰色区域内，而不是在下面）;在所有其他情况下，我不会得到任何阴影。

我也尝试从同一页面上的工作dropshadow（在图像上）并在相关选择器上使用逐字记录的风格代码：仍然没有改变。

尝试使用我也创建的另一个网站的工作CSS样式：无变化。

其他网站建议的试验代码（css-tricks和robertnyman-不能发布完整链接）：没有变化。

尝试在每个样式声明中添加“！important”：无变化。

既然它不是浏览器问题或基本代码的问题，它似乎是样式是如何级联（或如何嵌套元素），或甚至有溢出或一些这样的属性的问题？

来源

2014-09-11 Be Brilliant

先给margin-bottom到.shadow-below

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

来源

2014-09-11 06:40:19 karan3112

哇，卡兰：那是快！非常感谢你！ – 2014-09-11 06:48:22

无法使CSS box-shadow使用固定页眉和页脚

回答

相关问题