В box-decoration-breakимота Ви позволява да контролирате колко кутии декорации са привлечени през фрагментите на "счупени" елемент. Елемент може да се разбие на фрагменти в края на ред, над колони или при прекъсвания на страници.
.module ( box-decoration-break: clone; )Декорация свойства кутия, контролирани от box-decoration-breakса: background(и нейните подсвойства) border, border-radius, border-image, box-shadow, margin, и padding.
Стойности
slice: началната стойност. Декорациите на кутиите се прилагат за елемента като цяло и се счупват по краищата на фрагментите на елемента.clone: декорациите се прилагат за всеки фрагмент от елемента, сякаш фрагментите са неразбити, отделни елементи. Границите обгръщат четирите ръба на всеки фрагмент от елемента и фоновете се прерисуват изцяло за всеки фрагмент.
Употреба
box-decoration-break може да помогне за поддържане на последователен дизайн сред фрагментите на счупен елемент.
В този примерен образ абзац с оранжева граница и горно поле 1em е разбит през две колони. Горният абзац има първоначалната box-decoration-breakстойност на slice. Най-долният абзац има cloneстойността.
Член и демонстрация на това.
Демонстрация
В box-decoration-breakимота има ограничена подкрепа браузър. Тази демонстрация работи най-добре във Firefox 37+, където box-decoration-breakе напълно поддържана.
Вижте писалката 1074b03653ffb32b88a6f88823c3de34 от CSS-Tricks (@ css-tricks) на CodePen.
Поддръжка на браузър
По време на това писане само Firefox напълно поддържа box-decoration-break. Браузърите Webkit и Opera частично поддържат box-decoration-breakвградени елементи през прекъсвания на редове, но не и между прекъсвания на колони или страници.
| Chrome | Сафари | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31 * | 7 * | 37 | 29 * | Нито един | 4,4 * | 7,1 * |
* частична поддръжка с -webkitпрефикс.