Chrome 130 中的 box-decoration-break 屬性

Rachel Andrew

發布日期：2024 年 10 月 11 日

在 Chrome 130 中， box-decoration-break CSS 屬性值為 clone ，支援行內和區塊片段化。這篇文章將說明使用這項功能的理由和方式。

內嵌片段

如果內嵌元素 (例如文字字串) 斷成多行，就會發生內嵌片段化。行內元素有方塊，通常不必考慮這個方塊，除非您嘗試為元素新增背景或邊框。在以下範例中，系統會將含有 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;
}

多個資料欄，其中包含複製的方塊。

如果方塊有邊框，且在列印網頁時會出現片段，也會發生同樣的情況。如果方塊跨越兩頁，方塊的邊框會在第一頁完成，然後在第二頁開啟新方塊。