html - 投影以扩展元素的整个宽度

Question

如何获得投影以扩展元素的整个宽度。这就是我现在所拥有的，但我没有在元素上水平传播。
正如您在图像的右侧和左侧看到的那样，阴影是嵌入的，我需要它跨越整个宽度。

box-shadow: 0 8px 6px -6px black;

Answer 1

你的负传播半径是造成这种情况的原因。将 -6px 更改为某个正值：

box-shadow: 0 8px 6px 6px black;

jsFiddle 示例

根据MDN：

正值会导致阴影扩大并变大，负值会导致阴影缩小。如果未指定，它将为 0（阴影将与元素大小相同）。

Answer 2

不要使用 -6px 有它在 0px，也不要忘记其他浏览器。

-webkit-box-shadow: 0 8px 6px 0 #000000;
-moz-box-shadow: 0 8px 6px 0 #000000;
box-shadow: 0 8px 6px 0 #000000;