CSS box shadow仅在mozilla中出现？

Question

我的网站上有一个页脚，我想在它上面画一个微妙的阴影。 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/

看到这个小提琴

Answer 1

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

第四个值是阴影的扩散。负值会导致阴影缩小。结合模糊，它会产生与元素大小相同的阴影，然后offset-y移动到视图中。