【CSS Modules】box-decoration-breakプロパティの使い方
box-decoration-breakプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
box-decoration-breakプロパティは、要素の装飾が複数行や複数ページにわたってどのように表示されるかを制御するプロパティです。主に、インライン要素が複数行に折り返す場合や、ブロック要素が印刷時に複数ページに分割される際に、背景、ボーダー、パディング、ボックスシャドウといった装飾の挙動を定義します。
このプロパティは二つの値を持ちます。
値の一つであるslice（初期値）は、要素が分割されると各断片を独立したボックスとして扱います。この場合、ボーダーやパディングは分割箇所で途切れ、背景画像も各断片の最初から再描画されるイメージです。
もう一つの値であるcloneは、要素の各断片を元の単一要素の「クローン」として扱います。これにより、ボーダー、パディング、ボックスシャドウが各断片に完全に適用され、背景画像も連続して表示されるため、全体として視覚的な一体感が保たれます。
このプロパティは、複数行にわたるテキストのハイライト表示や、印刷時にボックスがページをまたぐ際の装飾の連続性を実現するのに役立ちます。
公式リファレンス: box-decoration-break
構文(syntax)
1box-decoration-break: clone;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません