box-decoration-break

**box-decoration-break** CSS 属性指定元素的片段在跨多行、多列或多页断开时应如何呈现。

试试看

指定的值将影响以下属性的外观

语法

css

/* Keyword values */
box-decoration-break: slice;
box-decoration-break: clone;

/* Global values */
box-decoration-break: inherit;
box-decoration-break: initial;
box-decoration-break: revert;
box-decoration-break: revert-layer;
box-decoration-break: unset;

box-decoration-break 属性被指定为下面列出的关键字值之一。

值

slice: 元素最初被渲染，就好像它的盒子没有被分割一样，之后这个假设盒子的渲染被分割成每一行/列/页的片段。请注意，假设盒子对于每个片段可能不同，因为它在内联方向断开时使用它自己的高度，在块方向断开时使用它自己的宽度。有关详细信息，请参阅 CSS 规范。
clone: 每个盒子片段都独立呈现，带有指定的边框、内边距和外边距，包裹每个片段。 border-radius、border-image 和 box-shadow 都独立应用于每个片段。背景也针对每个片段独立绘制，这意味着带有 background-repeat: no-repeat 的背景图像可能仍然重复多次。

正式定义

初始值	`slice`
应用于	所有元素
继承	否
计算值	按指定
动画类型	离散

正式语法

box-decoration-break = 
  slice  |
  clone

示例

内联盒子片段

当内联元素包含盒子装饰并且包含换行符时，由于初始的 slice 值，可能会出现意外的外观。以下示例显示了将 box-decoration-break: clone 添加到包含 <br> 标签的 <span> 的效果。

body {
  display: flex;
  background-color: grey;
  justify-content: space-around;
}

span {
  padding: 0em 1em;
  border-radius: 1rem;
  border-style: solid;
  margin: 1rem;
  font: 22px sans-serif;
  line-height: 2;
}

css

span {
  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;
}

#clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

html

<p>
  <span>The<br />quick<br />orange fox</span>
</p>
<p>
  <span id="clone">The<br />quick<br />orange fox</span>
</p>

块级盒子片段

以下示例显示了当块级元素包含盒子装饰并在多列布局中包含换行符时它们的外观。注意 box-decoration-break: slice 的结果将相当于第一个 <div> 如果垂直堆叠。

body {
  background-color: grey;
}
span {
  padding: 0em 2em;
  border-radius: 250px;
  border-style: solid;
  margin-left: 1em;
  font: 20px sans-serif;
  line-height: 1.5;
}

css

span {
  display: block;
  background: linear-gradient(to bottom right, yellow, green);
  box-shadow:
    inset 8px 8px 10px 0px deeppink,
    inset -5px -5px 5px 0px blue,
    inset 5px 5px 15px 0px yellow;
}
#base {
  width: 33%;
}
.columns {
  columns: 3;
}

.clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

html

<div id="base">
  <span>The<br />quick<br />orange fox</span>
</div>
<br />

<h2>'box-decoration-break: slice'</h2>
<div class="columns">
  <span>The<br />quick<br />orange fox</span>
</div>

<h2>'box-decoration-break: clone'</h2>
<div class="columns">
  <span class="clone">The<br />quick<br />orange fox</span>
</div>

规范

规范
CSS 片段模块 Level 3 # break-decoration

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

break-after、break-before、break-inside