CSS box-decoration-break（盒子装饰休息） 属性指定当内容跨多行或多列断开时，元素的背景、填充、边框和边框半径应如何表现。它控制这些属性在换行符中是连续的还是零散的。
此属性将影响以下属性的外观：
可能的值
- slice - 这是默认值。这意味着元素的填充、边框和背景将呈现为内容没有被破坏一样，从而导致跨换行符的连续呈现。
- clone - 每个框片段都单独呈现，其定义的边框、填充和边距包裹它。border-radius 和 box-shadow 分别应用于每个片段。当 background-repeat 设置为 no-repeat 时，背景图片可能会单独重复每个片段。
适用于
所有元素。
语法
box-decoration-break = slice | clone;
CSS box-decoration - 切片值
以下示例演示了 box-decoration-break： slice 属性在跨多行中断时在框之间切片 -
<html>
<head>
<style>
.box {
background-color: lightpink;
border: 5px solid green;
padding: 5px;
border-radius: 15px;
line-height: 3;
-webkit-box-decoration-break: slice;
box-decoration-break: slice;
}
</style>
</head>
<body>
<span class="box">CSS<br>box-decoration-break - <br> slice<br>Value</span>
</body>
</html>
CSS box-decoration - 克隆值
以下示例演示了 box-decoration-break： clone 属性控制当盒子在多行或多列上被破坏时的显示方式 -
<html>
<head>
<style>
.box {
background-color: lightpink;
border: 5px solid green;
padding: 5px;
border-radius: 15px;
line-height: 3;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
</style>
</head>
<body>
<span class="box">CSS<br>box-decoration-break - <br> clone<br>Value</span>
</body>
</html>
CSS box-decoration - 多列布局的碎片化
以下示例演示了一个具有多列布局的块元素，该块元素使用具有不同值的 box-decoration-break 属性，例如 slice 和 clone -
<html>
<head>
<style>
span {
display: block;
background: lightpink;
border: 5px solid green;
padding: 5px;
border-radius: 20px;
margin-left: 10px;
line-height: 2;
}
.clone-box {
-webkit-box-decoration-break: clone;
-ms-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}
.box {
-webkit-columns: 3;
-moz-columns: 3;
-ms-columns: 3;
-o-columns: 3;
columns: 3;
}
div {
width: 63em;
}
</style>
</head>
<body>
<h3>Without fragmentation</h2>
<div >
<span>CSS<br>box-decoration-break - <br> clone Value</span>
</div>
<br>
<h3>box-decoration-break: slice</h2>
<div class="box">
<span>CSS<br>box-decoration-break - <br> clone Value</span>
</div>
<h3>box-decoration-break: clone</h3>
<div class="box">
<span class="clone-box">CSS<br>box-decoration-break - <br> clone Value</span>
</div>
</body>
</html>
