The Box-shadow of CSS3 combat

The Box-shadow property contains 6 parameter values: Shadow Type, x-axis displacement, y-axis displacement, shadow size, shadow extension, and shadow color. These 6 parameter values can be omitted selectively.

Now we use an IMG element to raise chestnuts.

Let's write the simplest Box-shadow first.

You only need to set the X and Y offsets in the Box-shadow property.

img {    height:300px;     -moz-box-shadow:5px 5px;     -webkit-box-shadow:5px 5px;     box-shadow:5px 5px;}

Now let's add size and color to the shadows.

The third and fourth parameters are shadow size and color, respectively

img {    height:300px;     -moz-box-shadow:2px 2px 10px #06C;     -webkit-box-shadow:2px 2px 10px #06C;     box-shadow:2px 2px 10px #06C;}

You can also have no offset, so that the four-week picture will have a shadow (because the shadow has a size), with a slight sense of gradient.

img {    height:300px;     -moz-box-shadow:0 0 10px #06C;     -webkit-box-shadow:0 0 10px #06C;     box-shadow:0 0 10px #06C;}

Plus a 10px shadow extension

img {    height:300px;     -moz-box-shadow:0 0 10px 10px #06C;     -webkit-box-shadow:0 0 10px 10px #06C;     box-shadow:0 0 10px 10px #06C;}

You can also set multiple sets of parameter values to define a multicolor shadow

Order is left and right up and down

img {    height:300px;     -moz-box-shadow:-10px 0 12px Red,                     10px 0 12px Blue,                       0-10px 12px Yellow,                    0 10px 12px green
    ;     -webkit-box-shadow:-10px 0 12px Red,                     10px 0 12px Blue,                       0-10px 12px Yellow,                    0 10px 1 2PX Green;     box-shadow:-10px 0 12px Red,                     10px 0 12px Blue,                       0-10px 12px Yellow,                    0 10px 12px Green ;                        }

The results are as follows

You can also write gradient shadows with multiple parameters

img {    height:300px;     -moz-box-shadow:0 0 10px Red,                     2px 2px 10px 10px yellow,                       4px 4px12px 12px Green;     -webkit-box-shadow:0 0 10px Red,                     2px 2px 10px 10px yellow,                       4px 4px12px 12px Green;     Box-shadow:0 0 10px Red,                     2px 2px 10px 10px yellow,                       4px 4px12px 12px green;                       }

Results

The Box-shadow of CSS3 combat