box-decoration-break

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

CSSbox-decoration-break プロパティは、要素の断片が複数の行、段、ページに渡る場合に描画する方法を指定します。

指定された値は、次のプロパティの表示方法に影響を与えます。

構文

/* キーワード値 */
box-decoration-break: slice;
box-decoration-break: clone;

/* グローバル値 */
box-decoration-break: initial;
box-decoration-break: inherit;
box-decoration-break: unset;

box-decoration-break プロパティは、以下の一覧にあるキーワード値の一つで指定します。

slice
要素は最初、ボックスが断片化していないかのように描画され、その後でこの仮想ボックスに描画されたものが、それぞれの行/段/ページのための断片に分割されます。なお、仮想ボックスはインライン方向に分割された場合には独自の高さを使用し、ブロック方向に分割された場合は独自の幅を使用するため、それぞれの断片ごとに異なる場合があることに注意してください。詳しくは CSS の仕様書を参照してください。
clone
それぞれの断片が、それぞれの断片を囲む指定された境界、パディング、マージンを伴って個別に描画されます。 border-radius, border-image, box-shadow はそれぞれの断片に個別に適用されます。背景もそれぞれの断片で個別に描画されます。つまり、 background-repeat: no-repeat がついた背景画像であっても、複数回繰り返されます。

形式文法

slice | clone

インラインボックスの断片化

改行を含むインライン要素は次のように整形されます。

.example { 
  background: linear-gradient(to bottom right, yellow, green);
  box-shadow:
    8px 8px 10px 0px deeppink, 
    -5px -5px 5px 0px blue, 
    5px 5px 15px 0px yellow;
  padding: 0em 1em;
  border-radius: 16px;
  border-style: solid;
  margin-left: 10px;
  font: 24px sans-serif;
  line-height: 2;
}

...
<span class="example">The<br>quick<br>orange fox</span>

... 結果は以下のようになります。

A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example.

上記のスタイルに box-decoration-break: clone を追加すると、

-webkit-box-decoration-break: clone;
box-decoration-break: clone;

... 以下のような結果になります。

A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example

ブラウザーで上記の二つのインラインの例を試してみることができます。

これはインライン要素に大きな border-radius の値を使用した例です。二番目の "iM" には、 "i""M" の間に改行があります。それに対して、最初の "iM" には改行がありません。なお、2つの断片の描画結果を水平に並べると、断片化されていない描画結果と同じになります。

A screenshot of the rendering of the second inline element example.

ブラウザーで上の例を試してみることができます。

ブロックボックスの断片化

上記と同様のスタイルのブロックボックスは、断片化がないと次のような結果になります。

A screenshot of the rendering of the block element used in the examples without any fragmentation.

上記のブロックが三つの段に分割されると、次のような結果になります。

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice.

なお、これらの断片を縦に並べると、断片化されていない描画結果と同じになります。

そして、同じ例を box-decoration-break: clone で整形すると、次のような結果になります。

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone.

なお、それぞれの断片に同じ境界線、ボックスの影、背景が複製されます。

ブラウザーで上の例を試してみることができます。

仕様書

仕様書 状態 備考
CSS Fragmentation Module Level 3
box-decoration-break の定義
勧告候補 初回定義。
初期値slice
適用対象すべての要素
継承なし
計算値指定値
アニメーションの種類個別

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
box-decoration-breakChrome 完全対応 22
接頭辞付き 補足
完全対応 22
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 This property is only supported for inline elements.
Edge 完全対応 79
接頭辞付き 補足
完全対応 79
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 This property is only supported for inline elements.
Firefox 完全対応 32
完全対応 32
未対応 1 — 32
代替名
代替名 非標準の名前 -moz-background-inline-policy を使用しています。
IE 未対応 なしOpera 完全対応 15
接頭辞付き
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 11.5 — 15
Safari 完全対応 6.1
接頭辞付き 補足
完全対応 6.1
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 This property is only supported for inline elements.
WebView Android 完全対応 ≤37
接頭辞付き 補足
完全対応 ≤37
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 This property is only supported for inline elements.
Chrome Android 完全対応 18
接頭辞付き 補足
完全対応 18
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 This property is only supported for inline elements.
Firefox Android 完全対応 32
完全対応 32
未対応 4 — 32
代替名
代替名 非標準の名前 -moz-background-inline-policy を使用しています。
Opera Android 完全対応 14
接頭辞付き
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 11.5 — 14
Safari iOS 完全対応 7
接頭辞付き 補足
完全対応 7
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 This property is only supported for inline elements.
Samsung Internet Android 完全対応 1.0
接頭辞付き 補足
完全対応 1.0
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 This property is only supported for inline elements.

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
非標準の名前を使用しています。
非標準の名前を使用しています。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報