Chrome 130 中的 box-decoration-break 属性

Rachel Andrew

发布时间：2024 年 10 月 11 日

在 Chrome 130 中，提供了值为 clone 的 box-decoration-break 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;
}

包含克隆框的多个列。

如果框的边框在打印页面时被分解，也会出现同样的情况。如果框跨两个页面分屏，则框的边框将在第一页完成，然后在第二页打开一个新框。