Chrome 130 中的 box-decoration-break 属性

Rachel Andrew

发布时间：2024 年 10 月 11 日

在 Chrome 130 中，box-decoration-break CSS 属性（值为 clone）可用于支持内嵌和块碎片化。本文将介绍使用该功能的理由和方法。

内嵌碎片

内嵌碎片是指内嵌元素（例如文本字符串）跨多行显示的情况。内嵌元素具有盒子，您通常无需考虑这一点，除非您尝试为该元素添加背景或边框。在以下示例中，向 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 时，如果框被分段，则每个分段都会被边框包裹。

.columns {
  column-count: 5;
}

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

包含克隆框的多列。

如果框的边框在打印网页时出现碎片化，也会发生同样的情况。如果某个框跨越两个页面，则该框的边框将在第一个页面上完成，然后在第二个页面上打开一个新框。