盒装饰中断 | box-decoration-break (Fragmentation) - CSS 中文开发手册
这是一项实验技术
由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。另外请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。
box-decoration-breakCSS属性指定background，padding，border，border-image，box-shadow，margin，和clip-path
/* Keyword values */ box-decoration-break: slice; box-decoration-break: clone; /* Global values */ box-decoration-break: initial; box-decoration-break: inherit; box-decoration-break: unset;
| 初始值 | slice |
|---|---|
| 应用于 | all elements |
| 是否继承 | no |
| 应用媒体 | visual |
| 计算值 | as specified |
| 动画类型 | discrete |
| 规范顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
该box-decoration-break属性被指定为下面列出的关键字值之一。
取值
slice该元素被渲染，就好像它的盒子没有被分割，然后这个假设盒子的渲染被分割成每一行/列/页面。请注意，对于每个片段，假设盒子可以是不同的，因为如果在嵌入方向上发生中断，则使用它自己的高度;如果中断发生在块方向上，则使用其自身宽度。有关详细信息，请参阅CSS规范。
clone每个盒子片段都用指定的边框，填充和边距分别渲染每个片段的border-radius，border-image并且box-shadow，独立地施加到每个片段。背景在这意味着与背景图像的每个片段独立地得出background-repeat：no-repeat可以被重复多次。
规范语法
slice | clone
示例
内联框片段
包含换行符的内联元素：
.example {
background: linear-gradient(to bottom right, yellow, green);
box-shadow:
8px 8px 10px 0px deeppink,
-5px -5px 5px 0px blue,
5px 5px 15px 0px yellow;
padding: 0em 1em;
border-radius: 16px;
border-style: solid;
margin-left: 10px;
font: 24px sans-serif;
line-height: 2;
}
...
<span class="example">The<br>quick<br>orange fox</span> 结果：
添加box-decoration-break:clone到上面的样式：
-webkit-box-decoration-break: clone; -o-box-decoration-break: clone; box-decoration-break: clone;
Results in:
您可以在浏览器中尝试上面的两个内联示例。
这是一个使用大border-radius值的内联元素的例子。第二个"iM"在"i"和之间有一个换行符"M"。为了比较，第一个"iM"没有换行符。请注意，如果将这两个片段的渲染水平叠放在一起，则会导致非碎片渲染。
在浏览器中试试上面的例子。
块框片段
与上面类似风格的块元素，首先没有任何碎片：
将上面的块分成三列导致：
请注意，垂直堆叠这些片段将导致非碎片渲染。
现在用同样的例子 box-decoration-break:clone
请注意，每个片段具有相同的复制边框，阴影和背景。
您可以在浏览器中尝试上面的块示例。
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Fragmentation Module Level 3The definition of 'box-decoration-break' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Edge | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support on inline elements | 22-webkit | 32.0 (32.0) 1 | No support | No support | 11.5 2 15-o | 6.1 |
| Support on non-inline element | No support | 32.0 (32.0) 1 | No support | No support | 11.5 2 | No support |
| Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Support on inline elements | 4.4 | (Yes)-webkit | 32.0 (32.0) | No support | 12 2 15-o | 7.1 |
| Support on non-inline element | No support | No support | 32.0 (32.0) | No support | 12 2 | No support |