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Блок буде “нарізаний” на фрагменти, які не будуть підтримувати поля, межі, тіні, заокруглення і фонові зображення. Також фонове зображення застосовується лиш один раз, а кожний із фрагментів показуватиме тільки частину спільного фону.
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;
}