CSS参考手册
片段模块 | Fragmentation
盒装饰中断 | box-decoration-break
这是一项实验技术
由于该技术的规格不稳定,请查看各种浏览器的兼容性表格以供使用。另外请注意,随着规范的变化,实验技术的语法和行为在未来版本的浏览器中可能会发生变化。
box-decoration-break
CSS属性指定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 |
片段模块 | Fragmentation相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。