Menu
I'm trying to apply a box-shadow on all four sides. I could only get it on 2 sides:
997
box-shadow: h-shadow v-shadow blur spread color inset; In your example you're offsetting shadow by 10px vertically and horizontally. Like in other comments set first two values to 0px in order to have even shadow on all sides.
The CSS code would be: box-shadow: 0 0 10px 5px white; That will shadow the entire DIV no matter its shape!
To apply a shadow effect only on one side of an element set the blur value to a positive number and set the spread value to the same size but with a negative sign. Depending on which side you want the shadow on, set the offset value as follows: Top shadow: offset-x: 0 and offset-y: -5px.
It's because of x and y offset. Try this:
-webkit-box-shadow: 0 0 10px #fff; box-shadow: 0 0 10px #fff; edit (year later..): Made the answer more cross-browser, as requested in comments :)
btw: there are many css3 generator nowadays.. css3.me, css3maker, css3generator etc...
50
See: http://jsfiddle.net/thirtydot/cMNX2/8/
input { -webkit-box-shadow: 0 0 5px 2px #fff; -moz-box-shadow: 0 0 5px 2px #fff; box-shadow: 0 0 5px 2px #fff; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
