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;