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

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

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

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

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

правити

+ додати пораду чи нотатку

Синтаксис

box-decoration-break: slice | clone

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

slice

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

автор: Svitlana

правити

clone

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

unset

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
box-decoration-break	31	37	7	29	0

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

Приклади

+ запропонувати свій приклад у пісочниці

<p><span class="slice">slice: оформлення розрізане<br>разом з елементом</span></p>
<p><span class="clone">clone: кожен фрагмент<br>із власною рамкою</span></p>

span {
    background: gold;
    border: 2px solid #0172ad;
    border-radius: 8px;
    padding: 2px 8px;
}

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