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префіксом.