CSS中的box-decoration-break属性是一个很有用的属性，它可以帮助我们控制盒子的边框、背景图案和投影的断裂。
1. 简介
box-decoration-break是一个CSS属性，用于定义元素的盒子装饰如何在断开时呈现。这个属性有两个值：clone和slice，分别用于不同的效果。
当box-decoration-break设置为slice时，总是从“盒子”的开头开始切开，并且背景和边框的设置会沿着切口分割:
div {
box-decoration-break: slice;
}
这段CSS代码设置了一个div元素，其中box-decoration-break属性的值为slice。
当box-decoration-break设置为clone时，切口周围会自动克隆一个“盒子”，使断裂不会影响背景和边框设置。
div {
box-decoration-break: clone;
}
这段CSS代码设置了一个div元素，其中box-decoration-break属性的值为clone。
2. slice
在slice值下，边框和背景会自动分割，避免了断点的出现，但是我们还需要对此进行一定的控制。
2.1 边框切断
在slice模式下，边框会随着切口的出现而截断。
让我们来看一个例子：
div {
background-image: linear-gradient(to bottom, #FF7070 0%, #FFE6E6 100%);
border: 5px solid white;
box-decoration-break: slice;
}
这是一个有背景色和边框的div元素，其中box-decoration-break属性的值为slice。
当我们尝试给这个div添加不同的高度时，它的边框就会被切断。例如，当我们将高度设置为200px时，边框和背景便会被切断在中央：
可以看到，边框的样式是沿着切口进行切割的。
2.2 背景切断
在slice模式下，背景也会被切断。图像的平铺方式与容器内的尺寸无关，通常表现为更小的图像：
div {
background: url("https://picsum.photos/id/1/500/300") no-repeat;
background-size: cover;
border: 20px solid #FF7070;
border-radius: 8px;
box-decoration-break: slice;
}
这段CSS代码设置了一个div元素，其中box-decoration-break的值被设置为slice。 它还具有背景图像、边框和圆角。
当我们尝试给这个div添加不同的高度时，它的背景就会被切断。例如，当我们将高度设置为200px时，背景便会被切断在中央：
可以看到这个例子中，背景被切成了两部分，上下各一半，而且看起来上下两个部分全都在重复。
3. clone
对于边框和背景不被切割的设计需求，我们需要使用box-decoration-break属性的另一种值：clone。
在clone模式下，断口的背景和边框不被切割，并且两个断口之间克隆了一个“盒子”。
我们来看一个例子：
div {
background-image: linear-gradient(to bottom, #FF7070 0%, #FFE6E6 100%);
border: 5px solid white;
box-decoration-break: clone;
}
这是一个有背景和边框的div元素，其中box-decoration-break属性的值为clone。
当我们尝试给一个高度为200px的div元素添加此样式时，断口之间将克隆一个“盒子”，这样背景和边框就不会被切割了。
可以看到，box-decoration-break的选择影响了断口的外观。在此例中，背景和边框并没有被切割，并且断口之间克隆了一个“盒子”。
4. 总结
box-decoration-break属性提供了一种简单的方法来控制断口的外观，可用于处理在页面上呈现的类似瓦片元素的设计。这个属性的两个值，clone和slice，提供了不同的选项，可以用于实现不同的设计目标。