如何让单边框阴影从边到边出现？

Question

对于宽度为100％并且box-shadow定义为仅显示在底部的元素，如何使阴影沿元素的整个宽度显示为一致？

目前，阴影在左右两边都消失了;阴影明显不同于中间。例如：

<style>
body { padding: 0; margin: 0; }
h1 { margin: 0; box-shadow: 0 10px 10px #009;}
</style>

<h1>Bacon</h1>

或者看http://jsfiddle.net/RxVbt/1/。

Answer 1

我是通过将h1更改为包含

来实现此目的的

margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px;

负边距将阴影拉得足够宽，以便在整个过程中显得相同。这有点粗糙和hackish，但它的确有效。

Answer 2

添加展开距离以对抗模糊值。对于10px的模糊，您需要5px的扩展（每个方向5px = 10px）例如：

 h1 { margin: 0; box-shadow: 0 5px 10px 5px #009;}

请参阅http://jsfiddle.net/RxVbt/9/

Answer 3

试试这个：     h1 { margin: 0; box-shadow: 0px 10px #009;}

Answer 4

试试这个：

h1 { margin: 0; box-shadow: 0 2px 10px 8px #009;}

示例here

Answer 5

为结束上限添加负值。

box-shadow: -5px -5px 10px 10px #009;

fiddle here