装饰断裂属性
最后更新：2026-09-13
box-decoration-break 装饰断裂属性
box-decoration-break 属性控制元素的装饰样式（背景、边框、内边距等）在断裂处（如换行、跨页）如何渲染。默认值 slice 让装饰像被切断一样延续；clone 则每段独立渲染装饰。它主要影响行内元素跨行和打印分页时的视觉效果。
| 分类 | |
|---|---|
| 初始值 | slice |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
box-decoration-break: slice | clone;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
slice | clone | 关键字 | 装饰断裂方式 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| box-decoration-break | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v16 |
| 所有主流浏览器均支持 | |||||
提示： 行内元素跨行显示背景时，用 box-decoration-break:clone 可让每行独立包裹内边距和圆角，视觉效果更美观。
❓ 常见问题
Qslice 和 clone 有什么区别？
Aslice（默认）把元素在断行处像用刀切开一样，背景、边框、内边距在断裂处直接延续，不重新闭合，首尾行都不完整；clone 让每一段断行都独立渲染完整的背景、边框、内边距和圆角，视觉上每行都是完整的小盒子。跨行的行内元素想要每行都有完整圆角效果就用 clone。
Q什么时候需要用到这个属性？
A最典型的场景是行内元素（span、a）跨行显示时：希望每行文字都拥有完整的背景色块、圆角和内边距，就用 box-decoration-break:clone，常见于高亮标记、标签样式、多行链接下划线等；slice 适合让装饰连续延展的效果。另一个场景是打印分页时控制装饰在页边如何断开。
Qbox-decoration-break 的浏览器兼容性如何？
AFirefox 原生支持；Chrome/Edge/Safari 等 WebKit 系需要 -webkit-box-decoration-break 前缀（Chrome 115 起支持无前缀，Safari 长期依赖前缀）。使用时建议两个都写，先 -webkit- 前缀再标准写法，确保各内核兼容。
Q它会作用于哪些装饰样式？
A作用于 background、border、border-radius、padding 以及 box-shadow 等盒装饰属性，决定它们在元素跨行/跨页断裂处的渲染方式。注意它不作用于内联分割后的内容排布，也不影响文字的断行本身，只控制装饰如何在断裂处表现。
🏷️ 相关属性
💡 相关案例
📚 相关教程
