CSS3

プロパティ

box-decoration-break

→●、mdn

ページに於けるボーダーと背景の断片化。

box-decoration-break プロパティは、（ページ／column ／region ／行）分断がボックスを分割する下で、次を制御する：

• ボックスの［マージン／ボーダー／パディング］および他の装飾が、各ボックス断片の分断辺【“切り口”】を包装するかどうか。
• 各ボックス断片から背景位置決め区画 [CSS-BACKGROUNDS-3]（あるいは、マスク位置決め区画 [CSS-MASKING-1]、図形の基準ボックス [CSS-SHAPES-1]、等々）を導出したり複数化する方法、および その中に要素の背景を描く方法。

clone

各ボックス断片は、［ボーダー、パディング、マージン］により、独立に包装される。border-radius、border-image、box-shadow があれば、それらは各断片ごとに独立に適用される。背景は、要素の各断片の中に独立に描かれる。したがって、no-repeat による背景画像は、要素の断片ごとに描画されることになる。

注記： クローンされるマージンは、ブロック レベルのボックス上では切り落とされる。

<SPAN style="
 background:linear-gradient(45deg,white,gray);
 -webkit-box-decoration-break:clone;
 box-decoration-break:clone;
">ああああ<BR>ああああ<BR>あああああ</SPAN>

slice

要素が分断されずに描画された上で、分断で切り分けられたかのような効果になる： 分断辺の所には、ボーダーもパディングも挿入されず、box-shadow は描かれず、［背景、border-radius、border-image ］は、ボックス全体の幾何が分断されていないかのように適用される。

<SPAN style="
 background:linear-gradient(45deg,white,gray);
 -webkit-box-decoration-break:slice;
 box-decoration-break:slice;
">ああああ<BR>ああああ<BR>あああああ</SPAN>

↑box-decoration-break による 2 つの可能性： 図左は値 slice によるもの、図右は値 clone によるもの。

¶以下省く

テスト