css - CSS框阴影只能在Mozilla中使用吗？

我的网站上有一个页脚，我想在它上面放一个微妙的阴影。 CSS看起来像这样:

div.footer {
  -webkit-box-shadow: 0px 0px 7px $dark2;
  -moz-box-shadow: -7px 0px 7px $dark2;
  box-shadow: 0px 0px 7px $dark2;
}

我确信大家都很熟悉，Mozilla扩展了页面以渲染整个框阴影，如果您的元素(例如我的页脚)宽度扩展了100％，这是一个问题。

我已经调整了moz声明以防止水平滚动条，(我也在我的网站的菜单栏上做了此操作)，但是当我将其放在页脚上时，我发现Mozilla现在将页面扩展了7px，超过了底部的页脚。我对此感到惊讶，因为它没有将页面垂直扩展到页面顶部菜单栏的上方...

那么，有没有人找到在Firefox中渲染仅顶部框阴影的解决方案？

编辑:在此查看小提琴:http://jsfiddle.net/burlesona/2LwXa/

最佳答案

尝试box-shadow: 0px -7px 7px -7px #333;。

第四个值是阴影的扩散。负值会导致阴影缩小。结合模糊效果，将产生与元素大小相同的阴影，然后offset-y移入该阴影以进行查看。