CSS box-shadow 语法
在 CSS 中，box-shadow 属性用于为元素定义阴影效果。box-shadow 可以实现外阴影、内阴影、多重阴影等视觉效果，从而增强页面层次感。
语法：
box-shadow: inset length color;说明：
box-shadow 接收以下 3 种参数。
inset（可选）：如果指定了 inset 关键字，阴影会变为内阴影。默认是外阴影。length（必选）：这是一个包含两到四个长度值的列表。第 1 个 length 1 个 length：水平偏移量（offsetX）。正值向右偏移，负值向左偏移。必需。第 2 个 length：垂直偏移量（offsetY）。正值向下偏移，负值向上偏移。必需。第 3 个 length（可选）：模糊半径（blur-radius）。值越大，阴影越模糊。负值无效。默认为 0。第 4 个 length（可选）：扩散半径（spread-radius）。正值会使阴影扩大，负值会使阴影缩小。默认为 0。
color（可选）：阴影的颜色。如果省略，则使用元素的 color 值。
对于 box-shadow 属性，小伙伴们还需要注意以下几点。
- box-shadow 属性实现的只是视觉效果，它不会影响元素的布局。
- 如果元素设置了 border-radius，box-shadow 也会具有相应的圆角。
- box-shadow 属性可以通过逗号分隔来应用多个阴影效果。
CSS box-shadow 摘要
| 属于 | CSS 阴影 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 否 |
| 默认值 | none |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS box-shadow 示例
接下来，我们通过几个简单的例子来讲解一下 CSS box-shadow 属性是如何使用的。
示例 1：box-shadow 创建简单阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin: 50px;
background-color: lightskyblue;
box-shadow: 5px 5px; /* 水平偏移 5px，垂直偏移 5px */
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们为 div 元素添加了一个简单的阴影效果。box-shadow: 5px 5px; 表示阴影在水平方向向右偏移 5px，垂直方向向下偏移 5px。
没有指定模糊半径、扩散半径和颜色，它们将使用默认值（模糊半径 0，扩散半径 0，颜色通常为 black）。
示例 2：box-shadow 创建带模糊和颜色的阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin: 50px;
background-color: lightskyblue;
box-shadow: 10px 10px 5px salmon; /* 水平 10px，垂直 10px，模糊 5px，颜色 salmon */
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
box-shadow: 10px 10px 5px salmon; 表示创建一个带有模糊效果和颜色的阴影。阴影向右、向下偏移 10px，模糊半径为 5px，颜色为 salmon。
示例 3：box-shadow 创建带扩散半径的阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin: 50px;
background-color: lightskyblue;
/* 水平 0，垂直 0，模糊 5px，扩散 10px，颜色 salmon */
box-shadow: 0 0 5px 10px salmon;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
box-shadow: 10px 10px 5px salmon; 表示创建一个带有扩散半径的阴影。阴影没有偏移，有 5px 的模糊，但向外扩散了 10px，颜色是 salmon。
示例 4：box-shadow 创建内阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin: 50px;
/* 内阴影，水平 0，垂直 0，模糊 10px，颜色 salmon */
box-shadow: inset 0 0 10px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
当使用 inset 参数时，box-shadow 表示创建一个内阴影效果。
示例 5：box-shadow 创建多个阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body { padding: 100px; }
div {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
box-shadow:-5px 0 12px red,
0 -5px 12px yellow,
0 5px 12px blue,
5px 0 12px green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
box-shadow 取值可以是一个列表，然后值与值之间使用英文逗号隔开，此时表示创建不同方向的阴影。
注意: 当设置多个阴影时，列表中的第一个阴影会渲染在最上面，最后一个阴影在最下面。这与 background 属性的图层顺序是一致的。
