如何让单边盒子阴影从边缘到边缘出现？

对于宽度为100％的元素和仅在底部出现的元素box-shadow，如何使阴影在整个元素宽度上显示一致？如何让单边盒子阴影从边缘到边缘出现？

目前，阴影在左右边缘均淡出;那里的阴影明显不同于中间的阴影。例如：

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

<h1>Bacon</h1>

2012-11-20 KatieK

+1在小提琴治愈肉pseudotext。 –

@levib BaconIpsum FTW。 ;） – KatieK

添加传播距离来计算模糊值。对于需要10px的5像素的扩散（在每个方向= 10px的5像素）例如模糊：

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

2012-11-20 20:46:01

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

2012-11-20 20:42:23 Joel

通过消除蔓延，阴影的所有模糊都消失了，它看起来就像一个坚实的底部边界。 – KatieK

我这样做是通过改变H1包括

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

负缘拉阴影足够宽以一路之隔出现相同。这有点粗俗和骇人听闻，但它有效。

2012-11-20 20:45:03 ericj32768

聪明聪明！（欢迎来到SO！） – KatieK

谢谢，我花了很多时间修改盒子阴影。他们是我最喜欢的新CSS功能。 – ericj32768

尝试：

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

2012-11-20 20:47:11 Savi

这很接近，但阴影变得更薄一些。这个例子中发生了什么？ – KatieK

我将模糊从5px增加到8px，所以阴影不应该太细。我也用例子编辑了我的答案。 – Savi

为尾盖添加负值。

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

2012-11-20 20:48:24 Scott

回答