box-shadow通过h-offset、v-offset、blur-radius等参数结合盒模型实现阴影效果，padding和border影响阴影起始位置，配合border-radius可使阴影圆角，多层阴影用逗号分隔增强立体感，如卡片常用0 2px 4px与0 8px 16px双层阴影，按钮可用inset模拟按下，悬浮动画可通过js动态调整阴影，深色背景推荐蓝色调阴影避免生硬，注意大模糊值影响性能。
使用CSS的
box-shadow属性结合盒模型，可以为元素创建丰富自然的阴影效果。关键在于理解
box-shadow的参数如何与元素的边框、内边距和外边距相互作用。
box-shadow基础语法
box-shadow接受多个值来控制阴影的形态：
- h-offset：水平偏移，正数向右，负数向左
- v-offset：垂直偏移，正数向下，负数向上
- blur-radius：模糊半径，值越大阴影越柔和
- spread-radius（可选）：扩展半径，正值扩大阴影，负值收缩
- color：阴影颜色，支持rgba设置透明度
- inset（可选）：将阴影设为内阴影
示例：
box-shadow: 2px 4px 8px 0 rgba(0,0,0,0.2);
结合盒模型控制阴影范围
元素的
padding和
border会影响阴影的起始位置。默认情况下，阴影从边框外缘开始绘制。
- 增加
padding
会让内容远离阴影边缘，使阴影更明显 - 使用
border-radius
时，阴影会跟随圆角形状 - 若设置了
outline
或margin
，阴影仍以border外侧为基准
推荐搭配：
border-radius: 8px;
padding: 16px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
实现多层阴影增强立体感
通过逗号分隔多个阴影值，可叠加不同特性的阴影：
立即学习“前端免费学习笔记（深入）”；
- 一层近距离的柔和阴影模拟接触投影
- 一层远距离的淡影表现高度层次
例如卡片效果：
box-shadow: 0 2px 4px rgba(0,0,0,0.1),
0 8px 16px rgba(0,0,0,0.1);
适配不同场景的实用技巧
根据设计需求调整参数：
- 按钮点击态可用
inset
内阴影模拟按下效果 - 悬浮状态通过JS动态增加
box-shadow
实现浮起动画 - 深色背景建议用蓝色调阴影（如
rgba(0,0,255,0.3)
）避免纯黑生硬
性能提示：过度模糊的大阴影可能影响渲染性能，避免在大量元素上使用极大blur值。
基本上就这些，合理搭配参数就能做出自然的阴影效果。
