CSS-Shadow
优质
小牛编辑
120浏览
2023-12-01
简介
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 .
- Optionally, the inset keyword.
- Optionally, a value.
To specify multiple shadows, provide a comma-separated list of shadows.
例子
div.shadow { font-size:12px; width: 26em; padding: 0.5em; margin: 1.6em auto; text-shadow: 1px 1px rgba(240,230,140,0.4); white-space: pre; background: #F0E68C; } div.shadow.A { padding: 2em; border-radius: 50%; box-shadow: inset 0.3em 0.3em 0.9em black; } 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;