CSS3-add shadows to div or text (Use of Box shadows, text Shadows)
CSS3 defines two types of shadows: Box Shadows and Text shadows. Where the box shadow requires IE9 and its updated version, and the text shadow requires IE10 and its updated version. The following sections describe the use of two shades:
1, Box Shadow
(1) The property of the box shadow is Box-shadow
1
box-shadow:5px 5px 10px Gray;
The first two values indicate the horizontal and vertical offset of the shadow, respectively.
The third value represents a blur distance. The last value is the shadow color.
(2) The box shadow can be changed automatically with the shape of the box
Original: CSS3-add shadow to div or text (Use of Box shadow, text Shadow)
(3) If there is content under the box, you can use the RGBA () function to set the shadow color to translucent
Original: CSS3-add shadow to div or text (Use of Box shadow, text Shadow)
1
box-shadow:5px 5px 10px Rgba (0,0,0,0.5);
(4) Stretching range setting
You can also add a value after the blur distance to indicate the stretch range (spread). The solid color area before which to increase the blur boundary.
Below yesterday is not set stretch range, right figure set up:
Original: CSS3-add shadow to div or text (Use of Box shadow, text Shadow)
1
box-shadow:5px 5px 10px 5px Gray;
(5) Add inset behind the color to create the inner shadow
Original: CSS3-add shadow to div or text (Use of Box shadow, text Shadow)
1
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 box shading by specifying the color, followed by the horizontal and vertical offsets, and finally the blur value.
Original: CSS3-add shadow to div or text (Use of Box shadow, text Shadow)
1
Text-shadow:gray 10px 10px 7px;
CSS3-Add shadow (box Shadow, text Shadow use)
