box-shadow

box-shadow 属性使您能够从几乎任何元素的框架投射一个投影。如果在元素上指定了border-radius 以及盒子阴影，则盒子阴影将具有相同的圆角。多个盒子阴影的 z 轴顺序与多个文本阴影 相同（第一个指定的阴影位于最上面）。

盒子阴影生成器 是一款交互式工具，允许您生成 box-shadow。

/* Keyword values */
box-shadow: none;

/* A color and two length values */
/* <color> | <length> | <length> */
box-shadow: red 60px -16px;

/* Three length values and a color */
/* <length> | <length> | <length> | <color> */
box-shadow: 10px 5px 5px black;

/* Four length values and a color */
/* <length> | <length> | <length> | <length> | <color> */
box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);

/* inset, length values, and a color */
/* <inset> | <length> | <length> | <color> */
box-shadow: inset 5em 1em gold;

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

/* Global values */
box-shadow: inherit;
box-shadow: initial;
box-shadow: revert;
box-shadow: revert-layer;
box-shadow: unset;

使用以下方法指定单个盒子阴影

• 两个、三个或四个 <length> 值。
  • 如果只给出两个值，则它们被解释为 <offset-x> 和 <offset-y> 值。
  • 如果给出第三个值，则它被解释为 <blur-radius>。
  • 如果给出第四个值，则它被解释为 <spread-radius>。
• 可选地，inset 关键字。
• 可选地，<color> 值。

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

<color> 可选

指定阴影的颜色。有关可能的关键字和符号，请参见 <color> 值。如果未指定，则使用父元素中定义的 color 属性的值。

<length>

指定阴影的偏移长度。此参数接受两个、三个或四个值。第三和第四个值是可选的。它们的解释如下

• 如果指定了两个值，则它们被解释为 <offset-x>（水平偏移量）和 <offset-y>（垂直偏移量）值。负 <offset-x> 值将阴影放置在元素的左侧。负 <offset-y> 值将阴影放置在元素的上方。
  如果未指定，则使用 0 的值表示缺少的长度。如果 <offset-x> 和 <offset-y> 都设置为 0，则阴影将被放置在元素的后面（如果设置了 <blur-radius> 和/或 <spread-radius>，则可能会生成模糊效果）。
• 如果指定了三个值，则第三个值被解释为 <blur-radius>。此值越大，模糊越大，因此阴影越大越淡。不允许使用负值。如果未指定，它将被设置为 0（表示阴影的边缘将是锐利的）。规范中没有包含有关如何计算模糊半径的确切算法；但是，它确实详细说明了以下内容

  …对于一条长而直的阴影边缘，这应该会创建一个与阴影边缘垂直且居中的模糊距离长度的颜色过渡，从阴影内部半径端点的完全阴影颜色过渡到外部端点的完全透明。

• 如果指定了四个值，则第四个值将被解释为<spread-radius>。正值会导致阴影扩展并变大，负值会导致阴影缩小。如果未指定，它将设置为0（即，阴影将与元素大小相同）。

inset 可选

将阴影从外部盒阴影更改为内部盒阴影（就像内容被压入盒子中一样）。内阴影绘制在盒子的边框内（即使边框是透明的），并且它们显示在背景之上但在内容之下。默认情况下，阴影的行为类似于投影阴影，使盒子看起来像是悬浮在其内容之上。当未指定inset时，这是默认行为。

当动画化阴影时，例如当盒子上的多个阴影值在悬停时过渡到新值时，这些值将被插值。 插值 确定属性的中间值，例如模糊半径、扩散半径和颜色，因为阴影过渡。对于阴影列表中的每个阴影，颜色、x、y、模糊和扩散过渡；颜色为 <color>，其他值为 <length>。

在插值两个用逗号分隔的多个盒阴影列表之间的多个阴影时，阴影将按顺序配对，并在配对的阴影之间进行插值。如果阴影列表的长度不同，则较短的列表将在末尾用颜色为transparent、X、Y 和模糊为0 的阴影填充，内嵌或不内嵌设置为匹配。如果在任何一对阴影中，一个设置了inset而另一个没有，则整个阴影列表将不被插值；阴影将更改为新值，而不会有动画效果。

box-shadow = 
  <spread-shadow>#  

<spread-shadow> = 
  <'box-shadow-color'>?                               &&
  [ <'box-shadow-offset'> [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ]  &&
  <'box-shadow-position'>?                            

<box-shadow-color> = 
  <color>#  

<box-shadow-offset> = 
  [ none | <length>{2} ]#  

<box-shadow-blur> = 
  <length [0,∞]>#  

<box-shadow-spread> = 
  <length>#  

<box-shadow-position> = 
  [ outset | inset ]#  

在这个例子中，我们包含了三个阴影：一个内嵌阴影、一个常规投影阴影和一个创建边框效果的 2 像素阴影（我们可以用一个 outline 来代替第三个阴影）。

HTML

<blockquote>
  <q>
    You may shoot me with your words,<br />
    You may cut me with your eyes,<br />
    You may kill me with your hatefulness,<br />
    But still, like air, I'll rise.
  </q>
  <p>&mdash; Maya Angelou</p>
</blockquote>

CSS

blockquote {
  padding: 20px;
  box-shadow:
    inset 0 -3em 3em rgb(0 200 0 / 30%),
    0 0 0 2px white,
    0.3em 0.3em 1em rgb(200 0 0 / 60%);
}

结果

当x-offset、y-offset 和blur 全部为零时，盒阴影将是所有边上大小相同的实色轮廓。阴影从后往前绘制，因此第一个阴影位于后续阴影的顶部。当border-radius 设置为 0 时（这是默认值），阴影的角将是角。如果我们将border-radius 设置为任何其他值，那么角将被圆角化。

我们添加了一个与最宽盒阴影大小相同的边距，以确保阴影不会与相邻元素重叠或超出包含盒子的边界。盒阴影不会影响 盒模型 尺寸。

HTML

<div><p>Hello World</p></div>

CSS

p {
  box-shadow:
    0 0 0 2em #f4aab9,
    0 0 0 4em #66ccff;
  margin: 4em;
  padding: 1em;
}

结果

• <color> 数据类型（用于指定阴影颜色）
• text-shadow
• drop-shadow()
• 使用 CSS 将颜色应用于 HTML 元素