box-decoration-break 是一个 CSS 属性，它指定当框被碎片化时如何设置元素的背景、填充、边框、边框图像、框阴影、边距和剪辑路径。
box-decoration-break 属性有两个值。
第一个值是“切片”。
元素的第一部分显示为好像它的盒子没有被分割，然后盒子的显示被切成每一行、每一列等的部分。
第二个值是“克隆”。
其中每个元素都以指定的属性（边框、背景、填充、边距）独立显示。
边框环绕元素的每个片段的四个边缘，并且为每个片段完全重绘背景。
| 初始值 | slice |
|---|---|
| 应用于 | 无效 |
| 继承 | 无效 |
| 版本 | CSS3. |
| DOM 语法 | object.Style.BoxDecorationBreak =“clone”; |
CSS box-decoration-break 属性值说明
| 值 | 描述 |
|---|---|
| slice | 盒子装饰被设置为整个元素并在元素碎片的边缘处断裂。 |
| clone | 盒子装饰单独设置为每个片段。 |
| initial | 将属性设置为默认值。 |
| inherit | 从其父元素继承属性。 |
语法
box-decoration-break: slice | clone | initial | inherit | unset;
这是一个带有“clone”值的示例，其中装饰应用于每个片段，就好像片段是单个元素一样。
box-decoration-break 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
border: 3px solid #1c87c9;
padding: 0em 1em;
border-radius: 12px;
font-size: 20px;
line-height: 2;
}
span.box {
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
}
</style>
</head>
<body>
<h2>Box-decoration-break example</h2>
<p>Here the box-decoration-break is set to "clone".</p>
<span class="box">Box<br>decoration<br>break<br>property<br>example.</span>
</body>
</html>
让我们看另一个示例，其中“clone”值应用于box。
其中盒子被切成碎片。
带有“slice”值的 box-decoration-break 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
border: 3px solid #8ebf42;
padding: 0em 1em;
border-radius: 12px;
font-size: 20px;
line-height: 2;
background-color: #ccc;
}
span.ex2 {
-webkit-box-decoration-break: slice;
-o-box-decoration-break: slice;
box-decoration-break: slice;
}
</style>
</head>
<body>
<h2>Box-decoration-break example</h2>
<p>
Here the box-decoration-break is set to "slice" which is the default value of this property.
</p>
<span class="box">Box<br>decoration<br>break<br>property<br>example.</span>
</body>
</html>
现在让我们尝试为slice box添加阴影。
使用 box-decoration-break 属性创建带阴影的切片框的示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
border: 3px solid #8ebf42;
padding: 0em 1em;
border-radius: 12px;
font-size: 20px;
line-height: 2;
background-color: #cccccc;
box-shadow: 5px 4px 10px #666666;
box-decoration-break: slice;
-webkit-box-decoration-break: slice;
-o-box-decoration-break: slice;
}
</style>
</head>
<body>
<h2>Box-decoration-break example</h2>
<p>
Here the box-decoration-break is set to "slice" which is the default value of this property.
</p>
<span>Box<br>decoration<br>break<br>property<br>example.</span>
</body>
</html>
日期：2020-06-02 22:14:25 来源：oir作者：oir