box-decoration-break

Указанное значение повлияет на отображение следующих свойств:

• background
• border
• border-image
• box-shadow
• clip-path
• margin
• padding

/* Keyword values */
box-decoration-break: slice;
box-decoration-break: clone;

/* Global values */
box-decoration-break: inherit;
box-decoration-break: initial;
box-decoration-break: revert;
box-decoration-break: revert-layer;
box-decoration-break: unset;

Свойство box-decoration-break задается одним из значений ключевых слов, указанных ниже.

slice

Элемент первоначально отображается так, как будто его рамка не фрагментирована, после чего отображение этой гипотетической рамки разбивается на части для каждой строки/столбца/страницы. Обратите внимание, что гипотетическая рамка может отличаться для каждого фрагмента, поскольку она использует свою высоту, если разрыв происходит по горизонтали, и свою ширину, если разрыв происходит по вертикали. Подробности см. в спецификации CSS.

clone

Каждый фрагмент рамки отображается независимо с указанной границей, отступом и отступом, окружающими каждый фрагмент. border-radius, border-image и box-shadow применяются к каждому фрагменту независимо. Фон также рисуется независимо для каждого фрагмента, что означает, что изображение фона с background-repeat: no-repeat может повторяться многократно.

box-decoration-break = 
  slice  |
  clone  

Инлайновый элемент с декорированной рамкой может иметь неожиданный вид при содержании переносов строк из-за начального значения slice. Следующий пример демонстрирует эффект добавления box-decoration-break: clone к <span>, содержащему <br> теги:

span {
  background: linear-gradient(to bottom right, yellow, green);
  box-shadow:
    8px 8px 10px 0px deeppink,
    -5px -5px 5px 0px blue,
    5px 5px 15px 0px yellow;
}

#clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

<p>
  <span>The<br />quick<br />orange fox</span>
</p>
<p>
  <span id="clone">The<br />quick<br />orange fox</span>
</p>

Следующий пример демонстрирует, как блочные элементы с декорированной рамкой выглядят при содержании переносов строк в многоколоночной верстке. Заметьте, что результат box-decoration-break: slice эквивалентен первому <div> при вертикальной компоновке.

span {
  display: block;
  background: linear-gradient(to bottom right, yellow, green);
  box-shadow:
    inset 8px 8px 10px 0px deeppink,
    inset -5px -5px 5px 0px blue,
    inset 5px 5px 15px 0px yellow;
}
#base {
  width: 33%;
}
.columns {
  columns: 3;
}

.clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

<div id="base">
  <span>The<br />quick<br />orange fox</span>
</div>
<br />

<h2>'box-decoration-break: slice'</h2>
<div class="columns">
  <span>The<br />quick<br />orange fox</span>
</div>

<h2>'box-decoration-break: clone'</h2>
<div class="columns">
  <span class="clone">The<br />quick<br />orange fox</span>
</div>

• break-after, break-before, break-inside