box-shadow属性通过设置水平垂直偏移、模糊扩散半径、颜色及内外阴影，实现元素立体效果；常用于卡片、按钮、弹窗等场景，配合过渡动画可增强交互层次，关键在于合理控制参数与透明度，避免视觉冗余。
在CSS中，box-shadow 属性是增强元素立体感和视觉层次的重要工具。通过为盒子添加阴影，可以让元素“浮”在页面上，提升界面的美观度与交互感。
基本语法结构
box-shadow 的语法格式如下：
box-shadow: 水平偏移 垂直偏移 模糊半径 扩散半径 颜色 内外阴影;其中前两个值是必需的，其余可选。常用写法示例：
- 水平偏移（必填）：正值向右，负值向左
- 垂直偏移（必填）：正值向下，负值向上
- 模糊半径（可选）：数值越大，阴影越柔和
- 扩散半径（可选）：正值扩大阴影，负值缩小
- 颜色（可选）：支持 rgba、十六进制等，推荐用 rgba 控制透明度
- inset（可选）：设置为内阴影，默认为外阴影
示例：
立即学习“前端免费学习笔记（深入）”；
现代商业数字化服务公司网站模板
下载
现代商业数字化服务公司网站模板是一款提供数字营销、品牌包装、内容创作和网页设计等数字化商业服务公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
}
常见美化技巧
合理搭配参数能让元素更具真实感和设计感：
-
轻柔浮起效果：适合卡片、按钮
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); -
明显立体感：用于重要模块或弹窗
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); -
内凹效果：模拟按压或输入框凹陷
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); -
多层阴影叠加：增加真实光影层次
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
实际应用场景
box-shadow 在现代网页设计中广泛使用：
- 卡片组件：让内容区块脱离背景，更易聚焦
- 按钮悬停效果：hover 时加深阴影，模拟“抬起”感
- 模态框/弹窗：配合 backdrop 使用，突出层级
- 输入框聚焦：focus 时添加轻微内阴影提升反馈
示例：按钮悬停动效
.btn {transition: box-shadow 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
基本上就这些。掌握 box-shadow 的参数组合与透明度控制，能显著提升页面质感，关键在于自然、克制地使用，避免过度堆叠造成视觉疲劳。
