box-shadow
box-shadow CSS 属性用于在元素的框架周围添加阴影效果。你可以设置多重效果，每层效果之间用逗号分隔。一个盒阴影由相对于元素的 X 和 Y 偏移量、模糊和扩散半径，以及颜色来描述。
试一试
box-shadow: 10px 5px 5px red;
box-shadow: 60px -16px teal;
box-shadow: 12px 12px 2px 1px rgb(0 0 255 / 0.2);
box-shadow: inset 5em 1em gold;
box-shadow:
3px 3px red,
-1em 0 0.4em olive;
<section id="default-example">
<div class="transition-all" id="example-element">
<p>This is a box with a box-shadow around it.</p>
</div>
</section>
#example-element {
margin: 20px auto;
padding: 0;
border: 2px solid #333333;
width: 80%;
text-align: center;
}
box-shadow 属性允许你为几乎任何元素的框架投射下沉阴影。如果在元素上指定了 border-radius，阴影同样会拥有圆角。多个盒阴影的 z-ordering 与多个文本阴影相同（第一个指定的阴影在最上层）。
盒阴影生成器是一个交互式工具，可以让你生成 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>可选<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 状态与较长的列表匹配。如果在任何一对阴影中，一个设置了 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 ]#
示例
设置三个阴影
在此示例中，我们包含了三个阴影：一个内阴影、一个常规的下沉阴影，以及一个 tạo出边框效果的 2px 阴影（对于第三个阴影，我们本可以使用 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>— 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，角将会是圆角的。
我们添加了一个与最宽的盒阴影大小相同的 margin，以确保阴影不会与相邻元素重叠或超出包含框的边界。盒阴影不影响盒模型的尺寸。
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;
}
结果
规范
| 规范 |
|---|
| CSS Backgrounds and Borders Module Level 3 # box-shadow |
浏览器兼容性
加载中…