CSS3 box-shadow 属性使用指南
box-shadow 是 CSS3 新增的阴影属性，既可以给元素添加外阴影，也能通过 inset 关键字实现内阴影效果，常用于提升页面元素的层次感和立体感，是前端开发中非常实用的样式属性。
box-shadow 基础语法
box-shadow 的完整语法格式如下，其中带 [] 的参数为可选值：
box-shadow: [inset] x轴偏移 y轴偏移 [模糊半径] [扩散半径] [颜色];
各参数含义说明：
- inset：可选参数，添加该关键字表示生成内阴影，不添加则默认生成外阴影
- x轴偏移：必填参数，正值表示阴影向右偏移，负值表示阴影向左偏移，单位为 px、rem 等 CSS 长度单位
- y轴偏移：必填参数，正值表示阴影向下偏移，负值表示阴影向上偏移，单位同 x 轴偏移
- 模糊半径：可选参数，值越大阴影边缘越模糊，默认值为 0，表示阴影边缘清晰无模糊
- 扩散半径：可选参数，正值会让阴影向外扩大，负值会让阴影向内收缩，默认值为 0
- 颜色：可选参数，设置阴影的颜色，不设置时会使用浏览器的默认阴影颜色（通常为半透明黑色）
外阴影基础使用示例
下面是最基础的外阴影效果实现，给一个卡片元素添加右下角的灰色阴影，让卡片看起来有悬浮在页面上的效果：
/* 基础外阴影样式 */
.card {
width: 300px;
height: 200px;
background-color: #ffffff;
border-radius: 8px;
/* x偏移5px，y偏移5px，模糊10px，扩散0px，灰色阴影 */
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}上述代码中，rgba(0, 0, 0, 0.2) 表示透明度为 20% 的黑色，模糊半径 10px 让阴影边缘过渡更自然，避免了生硬的阴影效果。
内阴影 inset 使用方法
当需要在元素内部添加阴影时，只需要在 box-shadow 参数最前面加上 inset 关键字即可，内阴影常用于模拟凹陷效果、输入框聚焦状态等场景。
/* 内阴影样式示例 */
.inner-shadow-box {
width: 300px;
height: 200px;
background-color: #f5f5f5;
border-radius: 8px;
/* inset表示内阴影，x偏移0，y偏移3px，模糊6px，扩散0，深灰色阴影 */
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.15);
}这个内阴影效果会让元素看起来像是向内凹陷的，适合用在需要强调按下状态或者模拟立体凹陷的设计场景中。
多重阴影组合使用
box-shadow 支持同时设置多组阴影，每组阴影用逗号分隔，可以实现更丰富的阴影效果，比如同时添加外阴影和内阴影，或者叠加不同颜色和偏移的多层阴影。
/* 多重阴影组合示例 */
.multi-shadow {
width: 300px;
height: 200px;
background-color: #ffffff;
border-radius: 8px;
/* 第一组：外阴影，柔和的浅灰色大阴影 */
/* 第二组：内阴影，模拟顶部边缘的高光凹陷效果 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1),
inset 0 1px 2px rgba(255, 255, 255, 0.8);
}这里叠加了两组阴影，外阴影让元素整体有悬浮感，内阴影则在元素顶部边缘形成淡淡的亮色凹陷，让元素的立体效果更真实。
注意事项
- box-shadow 不会影响页面布局，阴影不会占据文档流空间，也不会触发元素的重排，性能开销较小
- 如果元素设置了 border-radius 圆角，box-shadow 会自动跟随圆角形状呈现，不会出现直角阴影的问题
- 内阴影 inset 只能作用于元素内部，阴影范围不会超出元素本身的内容区域
- 部分旧版本浏览器（如 IE9 以下）不支持 box-shadow 属性，如果需要兼容旧浏览器，可以考虑使用滤镜或者降级方案