box-shadow属性通过设置水平垂直偏移、模糊扩散半径、颜色及内外投影方式，可实现立体阴影效果；常用rgba色值控制透明度，结合transition增强交互，注意性能与多阴影层叠顺序。
CSS 中的 box-shadow 属性可以为元素添加阴影效果，让页面更具立体感和视觉层次。使用起来简单灵活，掌握基本语法和参数就能实现多种阴影样式。
基本语法
box-shadow 的基本写法如下：
box-shadow: 水平偏移 垂直偏移 模糊半径 扩散半径 颜色 投影方式;其中前两个值是必需的，其余可选。常见用法示例：
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);- 水平偏移（x-offset）：正值向右，负值向左
- 垂直偏移（y-offset）：正值向下，负值向上
- 模糊半径（blur）：值越大，阴影越模糊，不能为负
- 扩散半径（spread）：正数扩大阴影，负数缩小，可不写，默认为0
- 颜色：支持 hex、rgb、rgba 等格式，推荐用 rgba 控制透明度
- 投影方式：可选 inset 实现内阴影，不写则为外阴影
常见应用示例
通过调整参数，可以实现不同风格的阴影效果：
立即学习“前端免费学习笔记（深入）”；
-
轻微外阴影：
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -
悬浮效果：
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); -
内阴影：
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); -
双层阴影：
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
实用技巧
想让阴影更自然、适配设计风格，注意这些细节：
- 使用 rgba 颜色 控制透明度，避免阴影太生硬
- 配合 transition 实现鼠标悬停时的动态阴影变化
- 移动端注意阴影性能，避免过度模糊影响渲染
- 多个阴影用逗号分隔，顺序会影响层叠效果
