Css3 box-shadow detailed use of methods, css3box-shadow

Css3 box-shadow detailed use of methods, css3box-shadow

Its usage is:

The Code is as follows:	Copy code
box-shadow: x-offset y-offset blur spread color inset;

The preceding six parameters indicate horizontal offset (positive offset to the right, negative offset to the left) and vertical offset (positive offset to the down, negative offset to the up), blur distance, shadow size (Extended size), shadow color, and shadow type (external shadow is used by default and inset is used as inset ). Except the first and second parameters, they are optional. When "0 0px 10px #333" is used, note that the third parameter is the blur distance of the shadow.

Since there are many parameters and they can be changed, we will use some examples below to further understand them.

First, let's take a look at what shadow is. Next we use four divs with a width and height of 70px and use the following box-shadow to see the display effect:

The Code is as follows:	Copy code
#d1 { box-shadow:0 0 0px #333;}#d2 { box-shadow:70px 0 0px #333;}#d3 { box-shadow:0 70px 0px #333;}#d4 { box-shadow:70px 0px 0px #333;}

By observing the above figure, we can understand that the shadow is actually overwritten by the original block object, but the shadow can be moved (relative to the original fast object) through x-offset and y-offset ).

Now we can use three 70x70px divs to check the blur effect. The box-shadow settings are as follows:

The Code is as follows:	Copy code
#d5 { box-shadow:0 0 10px 0px #333;}#d6 { box-shadow:70px 70px 20px 0px #333;}#d7 { box-shadow:70px 70px 40px 0px #333;}

Blur is to blur the shadow from the inner to the inner. The comparison between www.111cn.net/d6and d7,can be seen as the larger the value, the larger the value.

Finally, let's take a look at the fuzzy distance parameter. The box-shadow settings are as follows:

The Code is as follows:	Copy code
#d8 { box-shadow:0px 0px 0px 10px #333;}#d9 { box-shadow:80px 80px 0px 10px #333;}#d10 { box-shadow:80px 80px 10px 10px #333;}

Original article: http://www.111cn.net/cssdiv/css/50547.htm