box-decoration-break - CSS（层叠样式表） 编辑

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

box-decoration-break 属性用来定义当元素跨多行、多列或多页时，元素的片段应如何呈现。

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

指定的值将影响元素以下属性的表现：

• background
• border
• border-image
• box-shadow
• clip-path
• margin
• padding

语法

/* 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	初步定义

初始值	slice
适用元素	all elements
是否是继承属性	否
计算值	as specified
Animation type	discrete

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参见

• break-after, break-before, break-inside