CSS辞典 box-decoration-breakプロパティの解説
ボックスが改行する時の表示方法を指定する「box-decoration-breakプロパティ」の使用方法を記載
バージョン：CSS3／2.1
対応ブラウザ
| 初期値 | slice |
| 適用される要素 | すべての要素 |
| モジュール | CSS Fragmentation Module Level 3 |
| 継承 | なし |
概要・使用方法
{ box-decoration-break: 表示方法;}「 box-decoration-breakプロパティ」は、幅の折り返しで改行する時に、ボーダー、余白、角丸、背景などの表示方法を指定します。
chrome、edge、operaブラウザーは接頭辞に「-webkit-」を指定する必要があります。
指定できる値（表示方法）
| slice | 分割されたボックスを連続したボックスとして扱い、ボーダー、余白、角丸、背景などは分割されます。 |
| clone | 分割されたボックスを独立したボックスとして扱い、ボーダー、余白、角丸、背景などは分断後に再適用されます。 border-radius、border-image、box-shadowプロパティなどの指定もすべて適用されます。 |
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>box-decoration-breakプロパティ CSSフォントサンプルページ</title>
<meta charset="uft-8">
<style>
.box-base{width:20em;}
.box1{
border:5px solid red;
margin:0.5em 0em;
box-decoration-break:slice;
-webkit-box-decoration-break:slice;
}
.box2{
border:5px solid red;
margin:0.5em 0em;
box-decoration-break:clone;
-webkit-box-decoration-break:clone;
}
</style>
</head>
<body>
<div class="box-base">
<h1>box-decoration-break:slice;</h1>
<p>クラゲは、通常は浮遊生活をする刺胞動物である。<span class="box1">体はゼラチン質で柔らかく、透明。体全体は、</span>多くのものでは傘のような形をしている。多くの場合、傘の下面の中心部に口がある。ヒドロクラゲでは傘から柄が伸びてその先に口があるものや、口の周囲に触手が発達するものもある。鉢クラゲの旗口クラゲ類、根口クラゲ類では、口の縁が長く伸びて口腕となる。</p>
<h1>box-decoration-break:clone;</h1>
<p>クラゲは、通常は浮遊生活をする刺胞動物である。<span class="box2">体はゼラチン質で柔らかく、透明。体全体は、</span>多くのものでは傘のような形をしている。多くの場合、傘の下面の中心部に口がある。ヒドロクラゲでは傘から柄が伸びてその先に口があるものや、口の周囲に触手が発達するものもある。鉢クラゲの旗口クラゲ類、根口クラゲ類では、口の縁が長く伸びて口腕となる。</p>
</div>
</body>
</html>「box-decoration-breakプロパティ」にcloneを指定すると改行したのちも独立したボーダーや背景となる。
box-decoration-break:slice;
クラゲは、通常は浮遊生活をする刺胞動物である。体はゼラチン質で柔らかく、透明。体全体は、多くのものでは傘のような形をしている。多くの場合、傘の下面の中心部に口がある。ヒドロクラゲでは傘から柄が伸びてその先に口があるものや、口の周囲に触手が発達するものもある。鉢クラゲの旗口クラゲ類、根口クラゲ類では、口の縁が長く伸びて口腕となる。
box-decoration-break:clone;
クラゲは、通常は浮遊生活をする刺胞動物である。体はゼラチン質で柔らかく、透明。体全体は、多くのものでは傘のような形をしている。多くの場合、傘の下面の中心部に口がある。ヒドロクラゲでは傘から柄が伸びてその先に口があるものや、口の周囲に触手が発達するものもある。鉢クラゲの旗口クラゲ類、根口クラゲ類では、口の縁が長く伸びて口腕となる。
chromeブラウザ実行結果
Firefox ブラウザ実行結果
edgeブラウザ実行結果
operaブラウザ実行結果
