简介
The box-shadow CSS property is used to add shadow effects around an element’s frame. You can specify multiple effects separated by commas if you wish to do so. A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.
语法（Syntax）
box-shadow:inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? && <color>? ]
Specify a single box-shadow using:
- Two, three, or four
values. - If only two values are given, they are interpreted as
values. - If a third value is given, it is interpreted as a
. - If a fourth value is given, it is interpreted as a
.
- If only two values are given, they are interpreted as
- Optionally, the inset keyword.
- Optionally, a
value.
To specify multiple shadows, provide a comma-separated list of shadows.
例子
border-radius: 50%;
box-shadow: inset 0.3em 0.3em 0.9em black;
0.5em -0.5em 0.4em red,
0.5em 0.5em 0.4em gold,
-0.5em 0.5em 0.4em lime,
-0.5em -0.5em 0.4em blue;
0 0 0 0.5em;
0 0 1em;
1em 0.5em;
1em 0.5em 1em;
0.3em 0.3em lightgreen;
0.3em 0.3em 0 0.6em lightgreen;
0 1.5em 0 -0.7em lightgreen;
0 0 1em 0.5em maroon;
inset 0.2em 0.4em red, inset -1em -0.7em red;
inset 11em 0 red;
inset -11em 0 red;
inset 13em 0 3em -3em orange,
inset -3em 0 3em -3em blue;
inset 11em 0 2em orange;
inset 1em 1em 2em -1em blue,
inset -1em -1em 2em -1em red;
