Z box-decoration-breaklastnostjo lahko nadzirate, kako se okraski škatle narišejo po drobcih "zlomljenega" elementa. Element se lahko razbije na drobce na koncu vrstice, nad stolpci ali med prelomi strani.
.module ( box-decoration-break: clone; )Lastnosti dekoracijo polje pod nadzorom box-decoration-break, so: background(in njene podskupine lastnosti) border, border-radius, border-image, box-shadow, margin, in padding.
Vrednote
slice: začetna vrednost. Okraski škatle se nanašajo na element kot celoto in se lomijo na robovih fragmentov elementa.clone: okraski se nanašajo na vsak fragment elementa, kot da bi bili fragmenti neprekinjeni, posamezni elementi. Meje zavijejo štiri robove vsakega fragmenta elementa, ozadja pa so v celoti prerisana za vsak fragment.
Uporaba
box-decoration-break lahko pomaga ohranjati dosledno zasnovo med drobci zlomljenega elementa.
Na tej vzorčni sliki je odstavek z oranžno obrobo in zgornjim robom 1em razbit v dveh stolpcih. Zgornji odstavek ima začetno box-decoration-breakvrednost slice. Spodnji odstavek ima clonevrednost.
Članek in predstavitev tega.
Demo
box-decoration-breakLastnost ima omejeno podporo brskalnika. Ta predstavitev najbolje deluje v Firefoxu 37+, kjer box-decoration-breakje v celoti podprt.
Glejte Pen 1074b03653ffb32b88a6f88823c3de34 podjetja CSS-Tricks (@ css-tricks) na CodePen.
Podpora za brskalnik
V času pisanja tega članka v celoti podpira samo Firefox box-decoration-break. Brskalniki Webkit in Opera delno podpirajo box-decoration-breakvrstne elemente med prelomi vrstic, ne pa tudi med prelomi stolpcev ali strani.
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31 * | 7 * | 37 | 29 * | Nobenega | 4,4 * | 7,1 * |
* delna podpora s -webkitpredpono.