CSS3 add a shadow to div or text (Use of Box shadow, text Shadow)

CSS3 defines two kinds of shadows: Box Shadows and Text shadows. Where the box shadow needs to be IE9 and its newer version, and the text shadow needs IE10 and its newer version. The following are the uses of two shades:

1, Box Shadow

(1) The property of the box shadow is Box-shadow

box-shadow:5px 5px 10px Gray;

The first two values represent the horizontal and vertical offset of the shadow.

The third value indicates a fuzzy distance. The last value is the shadow color.

(2) Box shadow can be changed automatically with the shape of the box

(3) If there is content underneath the box, you can use the RGBA () function to set the shadow color to translucent

box-shadow:5px 5px 10px Rgba (0,0,0,0.5);

(4) Stretching range setting
After the blur distance, you can also add a value that represents the stretch range (spread). The solid color area used to increase the blur boundary.

The following yesterday is not set stretch range, the right figure set:

box-shadow:5px 5px 10px 5px Gray;

(5) Add inset behind the color to create the inner shadow

box-shadow:5px 5px 10px Gray inset;

2, Text Shadow

The property of the text shadow is Text-shadow. The order of values differs from the box shadow by specifying the color, followed by the horizontal and vertical offsets, and then the fuzzy values.

Text-shadow:gray 10px 10px 7px;