html - 在全 Angular 元素上创建均匀阴影

Question

当一个盒子阴影被应用到一个元素时， Angular 落没有中间那么“厚”，因为它们在两边都没有阴影。这会对全宽元素产生奇怪的影响。

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

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

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

Answer 1

一个似乎有效的技巧是在元素上设置负水平边距，使其末端延伸到页面之外，并调整填充以进行补偿。使用your jsFiddle例如，try changing the CSS到:

h1 {    margin: 20px -20px;    padding: 10px 30px;    background-color: #AFA;    box-shadow: 0 0 10px black;}