盒子阴影 | box-shadow

box-shadowCSS 属性描述一个或多个阴影效果作为一个逗号分隔的列表。

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

box-shadow: 60px -16px teal;

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

box-shadow: 3px 3px red, -1em 0 0.4em olive;

box-shadow: inset 5em 1em gold;

box-shadow: 0 0 1em gold;

box-shadow: inset 0 0 1em gold;

box-shadow: inset 0 0 1em gold, 0 0 1em red;

box-shadow 属性使您能够从几乎任何元素的框架中投射阴影。如果border-radius在具有箱形阴影的元素上指定了box shadow，则box shadow将具有相同的圆角。多个方块阴影的 z排序与多个文本阴影（第一个指定的阴影在最上方）相同。

Box-shadow 生成器是一个交互式工具，允许您生成 box-shadow。

语法

使用以下命令指定一个box-shadow：

• Two, three, or four <length> values.
  • If only two values are given, they are interpreted as <offset-x><offset-y> values.
  • If a third value is given, it is interpreted as a <blur-radius>.
  • If a fourth value is given, it is interpreted as a <spread-radius>.
• Optionally, the inset keyword.
• Optionally, a <color> value.

要指定多个阴影，请提供逗号分隔的阴影列表。

值

inset如果未指定（默认），则阴影被假定为阴影（就像框被提升到内容之上一样）。

inset关键字的存在将阴影更改为帧内的阴影（就像内容在框内被压下一样）。插入阴影绘制在边界内（甚至透明），高于背景，但低于内容。<offset-x><offset-y>这些是<length>设置阴影偏移的两个值。<offset-x>指定水平距离。负值将阴影放置在元素的左侧。<offset-y>指定垂直距离。负值将阴影放置在元素上方。查看<length>可能的单位。

如果两个值都是0，则阴影放置在元素后面（并且如果<blur-radius>和/或被<spread-radius>设置，可能会产生模糊效果）。<blur-radius>这是第三个<length>值。这个值越大，模糊越大，因此阴影变得越来越轻。负值是不允许的。如果没有指定，它将是0（阴影的边缘是锐利的）。该规范没有包括如何计算模糊半径的确切算法，但是，它的确如下详述：

...对于长而直的阴影边缘，这应该创建一个颜色过渡，即与阴影边缘垂直并居中的模糊距离的长度，范围从阴影内半径终点处的完整阴影颜色到完全透明在它外面的端点。

<spread-radius>这是第四个<length>值。正值会导致阴影扩大并变大，负值会导致阴影缩小。如果未指定，它将是0（阴影将与元素的大小相同）。<color>查看<color>可能的关键字和符号的值。

如果未指定，则使用的颜色取决于浏览器 —— 通常是该color属性的值，但请注意，Safari 在此情况下正在绘制透明阴影。

插值

列表中的每个阴影（none视为0长度列表）通过颜色（作为颜色）分量，以及 x，y，模糊和（适当时）散布（作为长度）分量进行插值。对于每个阴影，如果两个输入阴影都是或者不是inset，则内插阴影在这方面必须与输入阴影相匹配。如果任何一对输入阴影有一个inset而另一个不是inset，则整个阴影列表是不可插入的。如果阴影列表具有不同的长度，那么较短的列表在末尾填充阴影，其颜色是transparent，所有长度都是0，并且其inset（或不）与较长列表匹配。

形式语法

none | <shadow>#where <shadow> = inset? && <length>{2,4} && <color>?where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle>

现场示例

• box-shadow test
• box-shadow tutorial and examples
• Box Shadow CSS Generator

规范

浏览器兼容性