box-decoration-break¶

Свойство box-decoration-break указывает, как должны отображаться фрагменты элемента, разбитые на несколько строк, столбцов или страниц.

Демо¶

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

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

Синтаксис¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

/* 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 ^{MDN (рус.)}
• CSS Fragmentation Module Level 3 ^{Spec (англ.)}

Комментарии