Why does:
div { -webkit-box-shadow: 5px 0 20px #c1c1c1; }
put a shadow underneath the div when it's clearly set to 0?
views:
24answers:
2
A:
It's not putting the shadow "underneath" the box, it's just bluring to the point that it's visible underneath. The parameters are:
-webkit-box-shadow: (Horizontal) (Vertical) (Blur) (Color);
Robert
2010-09-30 21:44:39
That's what I thought. Was hoping there was another way of doing it without images so the shadow would just be either horizontal or vertical and not have the blur overlap.
David B.
2010-09-30 21:47:01
A:
div { -webkit-box-shadow: 5px 0 20px #c1c1c1; }
Sets the -webkit-box-shadow with an offset of 5px (horizontal) and 0 (vertical) with a blur radius of 20px of colour #c1c1c1.
This means that the shadow isn't set to 0, it's just moved 0 vertically. If you want to have no shadow, either set the blur radius (20px) to 0 or remove the -webkit-box-shadow property.
David Thomas
2010-09-30 21:45:16
...or wrap a bounding div with `overflow: none` to clip the unwanted shadow (although this will cause some abrupt edges to the shadow).
kingjeffrey
2010-10-01 03:55:01