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она полностью поддерживается.
См. Pen 1074b03653ffb32b88a6f88823c3de34 от CSS-Tricks (@ css-tricks) на CodePen.
Поддержка браузера
На момент написания этой статьи полностью поддерживает только Firefox box-decoration-break. Браузеры Webkit и Opera частично поддерживают box-decoration-breakвстроенные элементы через разрывы строк, но не через разрывы столбцов или страниц.
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31 * | 7 * | 37 | 29 * | Никто | 4,4 * | 7.1 * |
* частичная поддержка с -webkitпрефиксом.