Почему CSS box-shadow создает тени в нежелательных позициях?

Question

Почему:

div { -webkit-box-shadow: 5px 0 20px #c1c1c1; }

помещает тень под div, когда для него явно установлено значение 0?

Answer 1

Она не помещает тень «под» коробкой, она просто вспыхивает до такой степени, что она видна снизу. Параметры:

-webkit-box-shadow: (Horizontal) (Vertical) (Blur) (Color);

http://jsfiddle.net/ngjpr/

Answer 2

div { -webkit-box-shadow: 5px 0 20px #c1c1c1; }

Устанавливает -webkit-box-shadow со смещением 5px (по горизонтали) и 0 (по вертикали) с радиусом размытия 20px цвета #c1c1c1.

Это означает, что тень не установлена ​​в 0, она просто перемещена 0 по вертикали. Если вы хотите, чтобы тени не было, либо установите радиус размытия (20px) на 0, либо удалите свойство -webkit-box-shadow.