Box-decoration-break プロパティ（Chrome 130）

Rachel Andrew

公開日: 2024 年 10 月 11 日

Chrome 130 では、 box-decoration-break 値が clone の CSS プロパティ 利用可能な場合は、 インライン構成とブロックフラグメンテーションを サポートしていますこの記事では、その理由と使用方法について説明します。

インラインでの断片化

インラインの断片化は、インライン要素（たとえば、 複数行に分割されます。インライン要素にはボックスがあり 一般的にはこれについて考える必要はありません。 追加することもできます次の例では 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;
}

ページの印刷時にボックスの境界線が分割されている場合も同様です。ボックスが 2 ページに分割されている場合は、ボックスの枠線 最初のページで完了し、2 番目のページで新しいボックスを開きます。