如何通过css box-shadow搭配盒模型实现阴影效果

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);

实现多层阴影增强立体感

通过逗号分隔多个阴影值，可叠加不同特性的阴影：

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

立即学习“前端免费学习笔记（深入）”；

• 一层近距离的柔和阴影模拟接触投影
• 一层远距离的淡影表现高度层次

例如卡片效果：
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值。

基本上就这些，合理搭配参数就能做出自然的阴影效果。

以上就是如何通过css box-shadow搭配盒模型实现阴影效果的详细内容，更多请关注php中文网其它相关文章！