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

Question

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

目前，阴影在左右边缘都淡出；那里的阴影与中间明显不同。例子：

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

<h1>Bacon</h1>

score 3 · Accepted Answer

我通过将 h1 更改为包括

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

负边距将阴影拉得足够宽，以使整个过程看起来都一样。这有点粗糙和hackish，但它有效。

score 3 · Accepted Answer

添加扩展距离以抵消模糊值。对于 10 像素的模糊，您需要 5 像素的散布（每个方向 5 像素 = 10 像素）例如：

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

score 0 · Accepted Answer

0

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

于 2012-11-20T20:42:23.600 回答

score 0 · Accepted Answer

0

试试这个：

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

于 2012-11-20T20:47:11.883 回答

score 0 · Accepted Answer

0

为端盖添加负值。

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

于 2012-11-20T20:48:24.013 回答

5 回答 5