CSS 框阴影仅在 mozilla 中出现？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5372039/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS box shadow top-only in mozilla?
提问by Andrew
I have a footer on my web site, and I'd like to have a subtle shadow cast above it. The CSS looks like this:
我的网站上有一个页脚，我想在它上面投下一个微妙的阴影。CSS 看起来像这样：
div.footer {
-webkit-box-shadow: 0px 0px 7px $dark2;
-moz-box-shadow: -7px 0px 7px $dark2;
box-shadow: 0px 0px 7px $dark2;
}
As I'm sure you're all familiar, Mozilla extends pages to render the full extent of a box shadow, which is a problem if you have elements extending 100% wide, such as my footer.
我相信你们都很熟悉，Mozilla 扩展页面以呈现框阴影的整个范围，如果您有元素扩展 100% 宽，例如我的页脚，这是一个问题。
I've already tweaked the moz declaration to prevent horizontal scrollbars, (I did this on my menubar on my site as well), but when I put this on my footer I found that Mozilla extends the page 7px past the footer on the bottom now. I was surprised by this because it doesn't extend the page vertically past the menubar at the top of the page...
我已经调整了 moz 声明以防止水平滚动条，（我也在我网站的菜单栏上做了这个），但是当我把它放在我的页脚上时，我发现 Mozilla 现在将页面扩展到底部页脚之外 7px . 我对此感到惊讶，因为它不会将页面垂直扩展到页面顶部的菜单栏之外......
So, has anyone got a solution for rendering a top-only box-shadow in Firefox?
那么，有没有人有在 Firefox 中渲染仅顶部框阴影的解决方案？
EDIT: See a fiddle of this at: http://jsfiddle.net/burlesona/2LwXa/
编辑：请参阅以下网址：http: //jsfiddle.net/burlesona/2LwXa/
回答by Neil
Try box-shadow: 0px -7px 7px -7px #333;.
试试box-shadow: 0px -7px 7px -7px #333;。
The fourth value is the spread of the shadow. Negative values cause the shadow to shrink. Combined with the blur, it results in a shadow with the same size as the element, which the offset-ythen moves in to view.
第四个值是阴影的扩散。负值会导致阴影缩小。结合模糊，它会产生一个与元素大小相同的阴影，offset-y然后移动到视图中。
