css властивість box-decoration-break


box-decoration-break - це одна із властивостей введених у CSS3. Вона дозволяє визначити, як будуть вести background, padding, border, border-image, box-shadow, margin і clip елементу, якщо він поділений на фрагменти. Це дозволяє розробникам, конкретизувати, що трапиться з елементом, коли він зламаний із-за розриву сторінки або колонки, для вбудованих (inline) елементів або розривів рядків. Всі ці поділені шматочки називаються фрагментами.

Властивість `box-decoration-break`

box-decoration-break дозволяє розглядати ці фрагменти як зламані частини одного блоку, або зробити кожний з них окремим блоком, зі своїми відступами, полями, межами та іншими властивостями якими володіють самостійні блоки.

Без використання цієї властивості (або якщо для неї задане значення без задання slice) блоки зазвичай “ріжуться” на місці розриву.

Наприклад, уявіть <div> який міститься у багатоколонному макеті. Елемент містить настільки багато тексту, що він охоплює декілька стовпців. І уявіть, що він має свої поля та межі. Якщо Ви подивитеся на цей <div> у браузері, Ви будете розчаровані побачивши, що коли він розривається на новий фрагмент, то як би “нарізається” й відступи та межі розподіляються на кожний поділений фрагмент. В деяких випадках, Ви можете забажати, що ці властивості були збережені для всіх властивостей. Ось тут і може знадобитися box-decoration-break. Встановивши значення clone для цієї властивості, Ви збережете межі, відступи, тіні, межі й заокруглення для них через розриви сторінок, колонок і ліній.

Синтаксис

box-decoration-break: slice | clone

Властивість box-decoration-break може отримувати 5 значень:

slice

Блок буде “нарізаний” на фрагменти, які не будуть підтримувати поля, межі, тіні, заокруглення і фонові зображення. Також фонове зображення застосовується лиш один раз, а кожний із фрагментів показуватиме тільки частину спільного фону.

clone

Фрагменти підтримують всі вище названі властивості. Також фонове зображення застосовується для кожного із фрагментів окремо.

initial

Значення властивості буде встановлено у значення без задання.

inherit

Значення властивості буде успадковано від батьківського елементу.

unset

Працює як initial або inherit, в залежності від того, чи може властивість наслідувати значення від батьківського елементу.

Значення без задання: slice
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.boxDecorationBreak

Переглядачі

Переглядач
box-decoration-break

31

0

37

7

29


Мобільних переглядачів ще не додано.


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад

Приклад роботи властивості box-decoration-break

Приклад роботи властивості box-decoration-break

Синтаксис властивості

.box {


	box-decoration-break: clone;


}

Додаткові посилання