如何通过css设置元素阴影box-shadow

box-shadow属性可为元素添加阴影，语法为box-shadow: h-offset v-offset blur spread color inset；h-offset和v-offset定义方向偏移，blur控制模糊度，spread调整扩展范围，color设置颜色，inset指定内阴影；支持多重阴影逗号分隔，常用于卡片浮起、按钮按下态和模态框背景遮罩，提升界面层次感但需避免过度使用影响性能。

设置元素阴影可以通过 CSS 的 box-shadow 属性实现，它能为元素框添加一个或多个阴影效果。语法灵活，可以控制阴影的方向、模糊程度、扩散范围和颜色。

基本语法

box-shadow 的基本写法如下：

其中每一项的含义是：

Narration Box

Narration Box是一种语音生成服务，用户可以创建画外音、旁白、有声读物、音频页面、播客等

27

查看详情

• h-offset：水平偏移值，正数向右，负数向左
• v-offset：垂直偏移值，正数向下，负数向上
• blur：模糊半径，值越大越模糊，不能为负
• spread：扩展半径，正数扩大阴影，负数缩小
• color：阴影颜色，支持任何合法的 CSS 颜色值
• inset（可选）：将阴影设为内阴影，默认是外阴影

常见使用示例

下面是一些实用的例子帮助理解用法：

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

• 简单外阴影：
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
• 柔和的扩散阴影：
  box-shadow: 0 4px 8px 2px rgba(0,0,0,0.2);
• 内阴影效果：
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
• 多重阴影（用逗号分隔）：
  box-shadow: 0 0 10px red, 0 0 20px blue;

实际应用场景

box-shadow 常用于提升界面层次感：

• 卡片组件添加轻微阴影，使其“浮起”
• 按钮点击态配合 inset 阴影模拟按下效果
• 模态框或弹窗使用大范围模糊阴影遮罩背景

基本上就这些。合理使用 box-shadow 能让页面更立体，但避免过度使用导致视觉混乱。注意在高斯模糊较大时可能影响渲染性能，尤其是移动设备。

以上就是如何通过css设置元素阴影box-shadow的详细内容，更多请关注php中文网其它相关文章！