Shadow with CSS3 's box-shadow attribute

New property "box-shadow" CSS3 is one of the attributes are useful and widely used in the process of writing CSS. With this attribute you can create components in your website beautiful shadow effect. However, this attribute is not supported on all current browsers, this attribute is only supported from Safari 3+, Firefox 3.1 (Alpha), Chrome, Opera and IE 9+.

Depending on your idea, you can adjust the parameters accordingly to achieve a beautiful effect as desired.

When you work with this property, you need to pay attention to the following three key parameters:

Example:

1.#yourdiv {
2. box-shadow: param1, param2, param3, color;
3.}

param1: The shadow horizontally, meaning that the shadow will be skewed towards the right side of the subject.
param2: Shadows Fall vertically, meaning that the shadow will be skewed towards the top of the subject.
param3: The width is also known as the thickness of the shadow.
Color: Color of the shadow.

A few examples:

.#yourdiv {
 background: #eee;
 box-shadow: 5px 5px 5px #666;
 -moz-box-shadow: 5px 5px 5px #666;
-webkit-box-shadow: 5px 5px 5px #666;
 margin-right: 5px;
 padding: 20px;
}

With the above code, the shadow will drift to the right and down for the param1 and param2 .

The code snippet is used as follows:

#yourdiv {
 background: #eee;
box-shadow: -5px -5px 5px #666;
-moz-box-shadow: -5px -5px 5px #666;
 -webkit-box-shadow: -5px -5px 5px #666;
 margin-right: 5px;
 padding: 20px;
}

When param1 and param2 Sound, we'll be shaded like below.