box-shadow属性通过设置水平偏移、垂直偏移、模糊半径、扩展半径、颜色和inset关键字，实现元素的外阴影或内阴影效果，常用于创建立体感和悬浮效果，如基础阴影、柔和悬浮、内凹显示及多重阴影组合，使用时推荐rgba透明色、避免过度渲染，并注意移动端性能。
CSS 的 box-shadow 属性可以为元素添加阴影效果，使页面更具立体感和视觉层次。使用它并不复杂，只需要理解各个参数的含义并合理组合即可。
box-shadow 基本语法
box-shadow 的基本语法如下：
box-shadow: h-offset v-offset blur spread color inset;
其中每个部分的含义如下：
- h-offset（水平偏移）：阴影水平方向的偏移量，正值向右，负值向左。
- v-offset（垂直偏移）：阴影垂直方向的偏移量，正值向下，负值向上。
- blur（模糊半径）：值越大，阴影越模糊；为0时边缘清晰。
- spread（扩展半径）：正值扩大阴影，负值缩小阴影。
- color（颜色）：阴影的颜色，支持十六进制、rgb、rgba 等格式。
- inset（可选）：加上此关键字会使阴影变为内阴影，默认是外阴影。
常见用法示例
以下是一些实用的 box-shadow 使用场景：
立即学习“前端免费学习笔记（深入）”；
- 基础外阴影：
box-shadow: 2px 2px 5px rgba(0,0,0,0.3); - 柔和的悬浮效果：
box-shadow: 0 4px 8px rgba(0,0,0,0.1); - 内阴影（常用于凹陷感）：
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); - 多重阴影（叠加多个阴影）：
box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 6px 10px rgba(0,0,0,0.1);
实用技巧与注意事项
使用 box-shadow 时，有几个小技巧可以让效果更自然：
- 推荐使用 rgba 颜色 设置阴影，透明度让阴影更柔和，避免生硬黑影。
- 想模拟“悬浮”效果时，适当增加垂直偏移和模糊值，比如 0 4px 6px 是常见组合。
- 不要过度使用大阴影，容易破坏页面简洁性。
- box-shadow 不影响布局，不会像 margin 或 padding 那样占用空间。
- 在移动端注意性能，过多复杂阴影可能影响渲染速度。
基本上就这些。掌握 box-shadow 的参数搭配，就能轻松做出卡片、按钮、模态框等常见组件的阴影效果。