此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
box-decoration-break
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
box-decoration-break 属性用来定义当元素跨多行、多列或多页时，元素的片段应如何呈现。
尝试一下
-webkit-box-decoration-break: slice;box-decoration-break: slice;-webkit-box-decoration-break: clone;box-decoration-break: clone;<section> <div> <span>This text breaks across multiple lines.</span> </div></section>#example-container { width: 14rem;}#example-element { background: linear-gradient(to bottom right, #6f6f6f, #000); color: white; box-shadow: 8px 8px 10px 0 #ff1492, -5px -5px 5px 0 #00f, 5px 5px 15px 0 #ff0; padding: 0 1em; border-radius: 16px; border-style: solid; margin-left: 10px; font: 24px sans-serif; line-height: 2;}指定的值将影响元素以下属性的表现：
语法
/* 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每个框片段与指定的边框、填充和边距独立呈现。
border-radius、border-image、box-shadow独立地应用于每个片段，每个片段的背景也是独立绘制的，这意味着使用background-repeat: no-repeat的背景图片仍然可能重复多次。
形式定义
形式语法
box-decoration-break =
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>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。
你可以尝试这个例子。
规范
| Specification |
|---|
| CSS Fragmentation Module Level 3 # break-decoration |