盒阴影属性
最后更新：2026-09-13
box-shadow 盒阴影属性
box-shadow 用于在元素边框外部或内部添加一层或多层阴影效果，让元素在页面上呈现出立体感和层次感。它是实现卡片浮起、按钮按下等现代 UI 视觉效果的核心属性，支持设置阴影的偏移、模糊半径、扩散半径和颜色。
| 分类 | |
|---|---|
| 初始值 | none |
| 继承 | 否 |
| 适用于 | all |
| 可动画 | shadow |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
box-shadow: none | <shadow>#;
/* <shadow> = inset? && <length>{2,4} && <color>? */⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
none | 关键字 | 无盒阴影 |
<shadow># | 类型 | 阴影列表：inset? 水平 垂直 模糊 扩散 颜色 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| box-shadow | ✓ v10 | ✓ v12 | ✓ v3.5 | ✓ v5.1 | ✓ v10.5 |
| 所有主流浏览器均支持 | |||||
提示： 前两个长度值（水平偏移和垂直偏移）是必需的；模糊半径和扩散半径默认为 0，颜色默认为当前文字颜色。
提示： 使用 inset 关键字可以让阴影出现在元素内部，常用于按下态或凹陷效果。
❓ 常见问题
Qbox-shadow 和 text-shadow 有什么区别？
Abox-shadow 作用于整个盒模型，阴影跟随元素边框的轮廓（含 border-radius），产生矩形或圆角矩形区域的投影；text-shadow 只作用于文本本身，沿文字笔画产生投影。两者语法相近，都由偏移、模糊、颜色等组成，但作用对象和层叠关系完全不同。
Q多层阴影怎么写？
A用逗号分隔多组阴影值，先写的阴影渲染在上层。例如 box-shadow: 0 2px 4px #000, 0 8px 16px #333; 会先绘制第一层再叠加第二层。多层阴影常用于模拟真实投影的衰减，或组合发光、描边等复合效果，层数越多越接近真实光照。
Qbox-shadow 能动画吗？动画卡顿怎么办？
Abox-shadow 支持过渡和动画，但它的动画会触发重绘，在低端设备上容易卡顿。优化方式：一是只在 hover 时切换阴影值，避免整个元素动起来；二是用带阴影的伪元素 + transition: opacity 代替；三是关键场景用 filter: drop-shadow()。建议在目标设备上测试。
Q如何实现内阴影（凹陷效果）？
A在阴影值最前面加上 inset 关键字，阴影就会投射到元素内部，例如 box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);。内阴影常用于模拟按钮按下、输入框凹陷等「往里凹」的视觉，多个 inset 阴影用逗号分隔，可组合出立体内陷效果。
🏷️ 相关属性
💡 相关案例
📚 相关教程
