box-shadow属性可为元素添加阴影，语法为box-shadow: h-offset v-offset blur spread color inset；h-offset和v-offset定义方向偏移，blur控制模糊度，spread调整扩展范围，color设置颜色，inset指定内阴影；支持多重阴影逗号分隔，常用于卡片浮起、按钮按下态和模态框背景遮罩，提升界面层次感但需避免过度使用影响性能。
设置元素阴影可以通过 CSS 的 box-shadow 属性实现，它能为元素框添加一个或多个阴影效果。语法灵活，可以控制阴影的方向、模糊程度、扩散范围和颜色。
基本语法
box-shadow 的基本写法如下：
box-shadow: h-offset v-offset blur spread color inset;其中每一项的含义是：
- h-offset：水平偏移值，正数向右，负数向左
- v-offset：垂直偏移值，正数向下，负数向上
- blur：模糊半径，值越大越模糊，不能为负
- spread：扩展半径，正数扩大阴影，负数缩小
- color：阴影颜色，支持任何合法的 CSS 颜色值
- inset（可选）：将阴影设为内阴影，默认是外阴影
常见使用示例
下面是一些实用的例子帮助理解用法：
立即学习“前端免费学习笔记（深入）”；
- 简单外阴影：
box-shadow: 2px 2px 5px rgba(0,0,0,0.3); - 柔和的扩散阴影：
box-shadow: 0 4px 8px 2px rgba(0,0,0,0.2); - 内阴影效果：
box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); - 多重阴影（用逗号分隔）：
box-shadow: 0 0 10px red, 0 0 20px blue;
实际应用场景
box-shadow 常用于提升界面层次感：
- 卡片组件添加轻微阴影，使其“浮起”
- 按钮点击态配合 inset 阴影模拟按下效果
- 模态框或弹窗使用大范围模糊阴影遮罩背景
基本上就这些。合理使用 box-shadow 能让页面更立体，但避免过度使用导致视觉混乱。注意在高斯模糊较大时可能影响渲染性能，尤其是移动设备。
