Chrome 130 中的 box-decoration-break 属性

Rachel Andrew

发布时间：2024 年 10 月 11 日

在 Chrome 130 中 box-decoration-break 值为 clone 的 CSS 属性 可用， 支持内嵌和块碎片化。这篇博文解释了原因和方式 使用。

内嵌分片

内嵌碎片是指当内嵌元素（例如 文本字符串，划分为多行。内联元素有一个框 通常不必考虑这一问题 除非您尝试添加 为元素添加背景或边框在以下示例中，向 span 添加了带有 border-radius 的背景。边框只在 字符串的开头和结尾。

span {
  background-color: #002856;
  color: #fff;
  border-radius: 0.5em;
  border: 2px solid black;
}

自动换行的文本行，其背景在自动换行处被切开。

box-decoration-break 的初始值为 slice，这会对框产生这种切片效果。新支持的 box-decoration-break: clone 不过，表示每一行的开头和结尾都有圆角边框。

span {
  background-color: #002856;
  color: #fff;
  border-radius: 0.5em;
  border: 2px solid black;
  box-decoration-break: clone;
}

一行换行文本，其换行处带有圆角背景。

块碎片化

如果使用 多列布局，或者打印内容且内容分页时。

在以下示例中，内容划分为多个列，每个段落 带有边框。初始值为 slice 时，框会在列底部和顶部进行切片。

.columns {
  column-count: 5;
}

.columns p {
  border: 5px solid #34c9eb;
  padding: 0.5em;
}

包含分割框的多列。

使用 box-decoration-break: clone 时，当框架被分块时，每个 fragment 都会用边框封装。

.columns {
  column-count: 5;
}

.columns p {
  border: 5px solid #34c9eb;
  padding: 0.5em;
  box-decoration-break: clone;
}

包含克隆框的多个列。

<ph type="x-smartling-placeholder">

当有边框的框在显示时不连续时，也会发生同样的情况 打印页面。如果框跨两个页面分屏，则框的边框将在第一页上完成，然后在第二页上打开一个新框。