box-shadow属性可为元素添加立体阴影效果，基本语法为：h-offset v-offset blur spread color inset；通过设置水平垂直偏移、模糊与扩展半径、颜色及内外阴影，实现基础外阴影、内阴影、多重阴影等效果；推荐使用rgba色值和适度模糊，避免纯黑阴影，兼顾美观与性能。
CSS 的 box-shadow 属性可以为元素添加阴影效果，让页面更具立体感和视觉层次。使用它并不复杂，只需掌握语法结构和参数含义即可灵活运用。
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 4px 6px rgba(0,0,0,0.3); - 柔和长投影：
box-shadow: 0 10px 20px rgba(0,0,0,0.1); - 内阴影效果：
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); - 多重阴影（用逗号分隔）：
box-shadow: 0 4px 8px rgba(0,0,0,0.1),
0 2px 4px rgba(0,0,0,0.2);
实用技巧与注意事项
想要做出自然美观的阴影，注意以下几点会更有效果。
- 推荐使用 rgba 颜色，透明度让阴影更柔和真实
- 避免纯黑色阴影（#000），容易显得生硬，建议用深灰并降低透明度
- 大模糊搭配小偏移适合“浮起”效果，常用于卡片组件
- 移动端注意性能，过度复杂的阴影可能影响渲染流畅度
- box-shadow 不影响布局，不会像 margin 那样占用空间
