CSS - box-decoration-break

• トップ
• CSSリファレンス
• box-decoration-break

概要

説明

インライン要素が改行されたり、ブロック要素が段組み、改頁する際の、border, border-radius, border-image, background, box-shadow, padding などの表示方法を指定します。

slice

初期値。最初にボーダー、背景、影、パディングなどをつけた後に、改行・改段・改頁します。

clone

最初に改行・階段・改頁した後に、個々のボックスにボーダー、背景、影、パディングなどをつけます。

使用例

.clone {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.multicol {
  columns: 2;
  width: 20rem;
  margin-bottom: .5rem;
}
.example-inline {
  padding: .5rem;
  border: 1px solid #cce;
  border-radius: 1rem;
  line-height: 3rem;
  background-color: #eef;
}
.example-block {
  padding: .5rem;
  border: 1px solid #cce;
  border-radius: 1rem;
  background-color: #eef;
}

<h3>[inline] box-decoration-break: slice</h3>
<div>
  <span class="example-inline">HAPPY<br>NEW<br>YEAR!!</span>
</div>

<h3>[inline] box-decoration-break: clone</h3>
<div>
  <span class="example-inline clone">HAPPY<br>NEW<br>YEAR!!</span>
</div>

<h3>[block] box-decoration-break: slice</h3>
<div class="multicol">
  <div class="example-block">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん</div>
</div>

<h3>[block] box-decoration-break: clone</h3>
<div class="multicol">
  <div class="example-block clone">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん</div>
</div>

リンク

• https://drafts.csswg.org/css-break-3/#break-decoration
• https://developer.mozilla.org/ja/docs/Web/CSS/box-decoration-break
• https://caniuse.com/#search=box-decoration-break