Táto box-decoration-breakvlastnosť vám umožňuje ovládať, ako sú dekorácie polí nakreslené cez fragmenty „zlomeného“ prvku. Element sa môže rozdeliť na fragmenty na konci riadku, nad stĺpcami alebo na zlomoch stránok.
.module ( box-decoration-break: clone; )Vlastnosti box dekorácie riadené box-decoration-break, sú: background(a jej podskupiny vlastnosti), border, border-radius, border-image, box-shadow, margin, a padding.
Hodnoty
slice: počiatočná hodnota. Dekorácie škatúľ sa vzťahujú na prvok ako celok a lámu sa na okrajoch fragmentov prvku.clone: ozdoby sa vzťahujú na každý fragment prvku, akoby boli fragmenty neprerušené, jednotlivé prvky. Okraje obaľujú štyri okraje každého fragmentu prvku a pozadia sa pre každý fragment prekreslia v plnom rozsahu.
Využitie
box-decoration-break môže pomôcť zachovať konzistentný dizajn medzi fragmentmi zlomeného prvku.
Na tomto príklade obrázku je odsek s oranžovým okrajom a horným okrajom 1em rozdelený na dva stĺpce. Horný odsek má počiatočnú box-decoration-breakhodnotu slice. Dolný odsek má clonehodnotu.
Článok a ukážka z toho.
Ukážka
Toto box-decoration-breakzariadenie má obmedzenú podporu prehľadávača. Táto ukážka funguje najlepšie vo Firefoxe 37+, kde box-decoration-breakje plne podporovaná.
Prečítajte si pero 1074b03653ffb32b88a6f88823c3de34 od CSS-Tricks (@ css-tricks) na stránkach CodePen.
Podpora prehľadávača
V čase písania tohto článku plne podporuje iba Firefox box-decoration-break. Prehliadače Webkit a Opera čiastočne podporujú box-decoration-breakvložené prvky cez konce riadkov, ale nie cez konce stĺpcov alebo stránok.
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31 * | 7 * | 37 | 29 * | Žiadne | 4,4 * | 7,1 * |
* čiastočná podpora s -webkitpredponou.