box-shadow: <horizontal-offset> <vertical-offset> <blur distance> <spread-distance> <color>;
box-shadow: 2px 5px 0 0 rgba(52,52,52,1);
| <horizontal-offset> | It is the horizontal offset. A positive value will create a shadow to the right of the element. A negative value to the left. In our example, our shadow is two pixels to the right of the a. |
| <vertical-offset> | It is the vertical offset. A positive value pushes the shadow down, creating a shadow on the bottom of the element. A negative value pushes the shadow up. In our example, the shadow is five pixels below the a. |
| <blur distance> | It is the blur distance of the shadow when included. The greater thevalue, the more the shadow is blurred. Only positive values are allowed. Our shadow is not blurred, so we can either include a value of zero (0), or omit the value altogether. |
| <spread-distance> | It determines the spread distance of the shadow. A positive value will cause the shadow shape to expand in all directions. A negative value contracts the shadow. Our shadow has no spread, so again we can either include a value of zero (0), or omit the value altogether. |
| <color> | It is the color of the shadow. If it’s omitted, the spec states that it should default to the same as the color property of the element. In the example above, we used an RGBA color. In this particular design, the shadow is a solid color, so we could just have used the hex value. |
-webkit-box-shadow: 2px 5px 0 0 rgba(72,72,72,1);
-moz-box-shadow: 2px 5px 0 0 rgba(72,72,72,1);
box-shadow: 2px 5px 0 0 rgba(72,72,72,1);
