在全角元素上创建均匀阴影

Question

当一个 box-shadow 被应用到一个元素上时，角比中间更“厚”，因为它们两边都没有阴影。这会对全宽元素产生奇怪的影响。

http://jsfiddle.net/kevincox/6FhYe/18/

如果您查看该示例，您会发现边缘更亮。如果“横幅”位于页面顶部，您可以将其展开并向上移动，但这不适用于页面中间，因为您可以看到顶部。

我想知道是否有人有没有图像且最好是跨浏览器的解决方案，但我可以稍微处理一下供应商前缀。有没有像单独的水平和垂直拉伸之类的东西？

Answer 1

一种似乎有效的技巧是在元素上设置负水平边距，使其末端延伸到页面之外，并调整填充以进行补偿。以您的 jsFiddle为例，尝试将 CSS 更改为：

h1{
    边距：20px -20px ;
    填充: 10px 30px ;
    背景颜色：#AFA；
    框阴影：0 0 10px 黑色；
}