在全角元素上创建偶数阴影

Question

当一个盒子阴影应用于一个元素时，角落不如中间“厚”，因为它们两侧都没有阴影。这会对全宽度元素产生奇怪的影响。

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

如果你看一下这个例子，你会看到边缘更亮。如果“横幅”位于页面的顶部，您可以将其展开并将其向上移动，但这不适用于页面中间，因为您可以看到顶部。

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

Answer 1

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

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

Answer 2

请查看此更新的jsfiddle

阴影中的每个数字代表以下

1. 阴影的水平偏移，正值表示阴影 在框的右侧，负偏移将阴影打开 盒子的左边。
2. 阴影的垂直偏移，负阴影意味着阴影 盒子阴影将在盒子上方，正片子阴影将在盒子上方 将在框下方。
3. 模糊半径（可选），如果设置为0，阴影将变得清晰， 数字越高，它就越模糊。
4. 扩散半径（可选），正值会增加 阴影，负值会减小尺寸。默认值为0（ 阴影与模糊大小相同。）
5. 颜色

Answer 3

应用border-radius也可以解决这个问题（但很明显，这取决于你是否想在设计中使用它）。

h1 {
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: #AFA;
    box-shadow: 1px 0 10px black;
}