背景裁剪属性
最后更新：2026-09-13
background-clip 背景裁剪属性
background-clip 属性用于控制背景的绘制区域，决定背景（颜色或图片）在哪个盒子模型区域内显示。默认 border-box 让背景延伸到边框下，padding-box 裁剪到内边距区域，content-box 只显示在内容区域。CSS3 还新增了 text 值实现文字裁剪效果。
| 分类 | |
|---|---|
| 初始值 | border-box |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
background-clip: border-box | padding-box | content-box | text;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
border-box | padding-box | content-box | text | 关键字 | 背景绘制区域 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-clip | ✓ v4 | ✓ v12 | ✓ v4 | ✓ v3.1 | ✓ v10 |
| 所有主流浏览器均支持 | |||||
提示： 配合透明或虚线边框使用 border-box 与 padding-box 的差异会更明显。
重要： background-clip: text 需要配合 -webkit-text-fill-color: transparent 才能显示文字裁剪效果。
❓ 常见问题
Qbackground-clip 和 background-origin 有什么区别？
Aclip 控制背景的"绘制截止区域"（裁切到哪），origin 控制背景图"定位参考原点"。如 clip: border-box 时背景可延伸到边框之下；origin: border-box 时以边框左上角为原点。background-color 只受 clip 影响，origin 仅作用于背景图。
Q如何实现文字渐变背景效果？
A三步：background-image 设置渐变；background-clip: text 把背景裁剪到文字轮廓；-webkit-text-fill-color: transparent 把文字填充色设为透明。同时设 background-repeat: no-repeat 避免渐变平铺。
Qbackground-clip 的三个值分别是什么效果？
Aborder-box（默认）：背景延伸到边框区域，边框绘制在背景之上；padding-box：背景只在内边距区域内显示，边框之下没有背景；content-box：背景只在内容区域显示，padding 区域也没有背景。给元素加上边框对比即可看出差异，常用透明或虚线边框观察。
Qbackground-clip: text 的兼容性如何？
A现代浏览器均支持 background-clip: text，旧版 Safari/Chrome 需 -webkit-background-clip: text 前缀并保留 -webkit-text-fill-color: transparent。不支持时文字退化为普通填充色，建议用 @supports 回退。
🏷️ 相关属性
💡 相关案例
📚 相关教程
