ウェブランサー

box-decoration-break - ボックスがページ区切りや折り返しになった場合に断片の表示方法を指定する

取り扱い 限定的
適用可能 全ての要素
継承 しない
対応ブラウザ box-decoration-breakの対応状況を確認する

box-decoration-breakプロパティの説明

box-decoration-breakは、要素のボックスが改ページやカラムの改行によって断片化(フラグメンテーション)したとき、要素の背景、パディング、ボーダー、ボーダーイメージ、ボックスシャドウ、マージン、クリップがどのように表示するべきかを指定します。要素が分割されてレンダリングされた時の各部分は「フラグメント」と呼び、印刷時に要素がページ区切りにまたがる場合や、インラインボックスが複数の行に折り返された場合に発生します。

box-decoration-breakに与えられる値

slice
要素のボックスは、断片化されない状態でレンダリングされ、各行やページごとにスライスして配置したように見える。インライン方向に折り返しが発生した場合は独自の高さを使用し、ブロック方向に折り返しが発生した場合は独自の幅を使用する。改行部分にボーダーやパディングは挿入されず、その角に角丸は適用されない。画像ボーダーはボックス全体に対して描画される(初期値)
clone
各ボックスのフラグメントは、ボーダー、パディング、および各フラグメントを囲むマージンで独立してレンダリングされる。border-radius、border-image、box-shadowは、各フラグメントに独立して適用される。背景は各フラグメントに独立して描画されるので、background-repeat:no-repeatの背景画像が複数回繰り返される可能性がある

box-decoration-breakの使用サンプル

CSS
.box_sample {
 padding: 3px;
 margin: 0 0 50px 0;
 background: linear-gradient(to bottom right, #FFFFFF, #FFAAEE);
 box-shadow: 5px 5px 2px rgba(0,0,0,0.4);
 border: 1px solid #333333;
 border-radius: 10px;
}
.block_slice {
 display: block;
 box-decoration-break: slice;
 -webkit-box-decoration-break: slice;
 -moz-box-decoration-break: slice;
 -o-box-decoration-break: slice;
}
.block_clone {
 display: block;
 box-decoration-break: clone;
 -webkit-box-decoration-break: clone;
 -moz-box-decoration-break: clone;
 -o-box-decoration-break: clone;
}
.inline_slice {
 display: inline;
 box-decoration-break: slice;
 -webkit-box-decoration-break: slice;
 -moz-box-decoration-break: slice;
 -o-box-decoration-break: slice;
}
.inline_clone {
 display: inline;
 box-decoration-break: clone;
 -webkit-box-decoration-break: clone;
 -moz-box-decoration-break: clone;
 -o-box-decoration-break: clone;
}
HTML
<div class="box_sample block_slice">
block_slice<br>
ブレイクポイントは要素をスライスした状態に見える<br>
</div>

<div class="box_sample block_clone">
block_clone<br>
要素のフラグメントごとに装飾される<br>
</div>

<div class="box_sample inline_slice">
inline_slice<br>
ブレイクポイントは要素をスライスした状態に見える<br>
</div>

<div class="box_sample inline_clone">
inline_clone<br>
要素のフラグメントごとに装飾される<br>
</div>
表示確認
block_slice
ブレイクポイントは要素をスライスした状態に見える
block_clone
要素のフラグメントごとに装飾される
inline_slice
ブレイクポイントは要素をスライスした状態に見える
inline_clone
要素のフラグメントごとに装飾される

box-decoration-breakに関連するCSSプロパティ