Chrome 130 中的 box-decoration-break 屬性

Rachel Andrew

發布日期：2024 年 10 月 11 日

在 Chrome 130 中，您可以使用 box-decoration-break CSS 屬性，其值為 clone，可支援內嵌和區塊分割。本文會說明原因和做法 以便使用。

行內分割

內嵌片段是指內嵌元素 (例如 請將文字分到多行。內嵌元素有一個方塊 你通常不必費心思考這類問題 背景或框線在以下範例中，我們將背景 (含有 border-radius) 新增至 span。邊框上只有框線 。

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

具有複製方塊的多個資料欄。

如果在列印頁面時，您在方塊上設定了邊框，也會發生同樣的情況。如果方塊被分割成兩個頁面，方塊的邊框 會在第一頁完成，然後在第二頁開啟一個新方塊。