盒装饰中断 | 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 |
盒装饰中断 | box-decoration-break (Fragmentation) - CSS 中文开发手册 - Break易站