仅在Mozilla中的CSS框阴影顶部？

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 会移动到视图中。