box-decoration-break
Try it
Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
box-decoration-break
属性用来定义当元素跨多行、多列或多页时,元素的片段应如何呈现。
指定的值将影响元素以下属性的表现:
语法
/* Keyword values */
box-decoration-break: slice;
box-decoration-break: clone;
/* Global values */
box-decoration-break: initial;
box-decoration-break: inherit;
box-decoration-break: unset;
box-decoration-break
的合法值包括下列几种:
值
slice
- 元素被按照盒子被切割前的原始样式渲染,之后,针对每个行/列/页面将此假设框渲染成片段。请注意,假设框对于每个片段可以是不同的,因为如果中断发生在行内方向,则它使用自己的高度,如果中断发生在块方向,则它使用自己的宽度。有关详细信息,请参阅CSS规范。
clone
- 每个框片段与指定的边框、填充和边距独立呈现。The
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;
box-decoration-break: clone;
... 效果:
你可以 尝试这两个例子.
下面是一个使用大圆角值的内联元素示例。第二个“iM”在“i”和“M”之间有一个分界线,作为比较,第一个“iM”是没有换行符的。请注意,如果您将两个片段的呈现水平地排列在一起,就会导致非分段呈现。
你可以 尝试这个例子.
块状盒子片段
与上述样式相似且没有碎片的块元素的表现:
将上述块分割成三列,表现为:
注意,垂直堆叠这些部分将导致非碎片渲染。
现在,同样的例子,但使用 box-decoration-break
的效果:
请注意,每个片段都具有相同的 border, box-shadow 和 background。
你可以 尝试这个例子。
规范
规范 | 状态 | 备注 |
---|---|---|
CSS Fragmentation Module Level 3 box-decoration-break |
Candidate Recommendation | 初步定义 |
浏览器兼容性
BCD tables only load in the browser