box-decoration-breakĪpašums ļauj kontrolēt to, kā kastes apdare tiek zīmēta pāri fragmentiem "sadalīti" elements. Elements var sadalīties fragmentos rindas beigās, virs kolonnām vai lapu pārtraukumos.
.module ( box-decoration-break: clone; )Kastē apdares īpašības, kuras kontrolē box-decoration-breakir: background(un tās apakšgrupu īpašības), border, border-radius, border-image, box-shadow, margin, un padding.
Vērtības
slice: sākotnējā vērtība. Kastīšu rotājumi attiecas uz elementu kopumā un saplīst elementa fragmentu malās.clone: rotājumi attiecas uz katru elementa fragmentu tā, it kā fragmenti būtu nesalauzti, atsevišķi elementi. Apmales aptina katra elementa fragmenta četras malas, un foni tiek pilnībā pārzīmēti katram fragmentam.
Lietošana
box-decoration-break var palīdzēt saglabāt sabojātu elementu fragmentu konsekventu dizainu.
Šajā attēla piemērā divās kolonnās ir sadalīts punkts ar oranžu apmali un 1em augšējo malu. Augšējās rindkopas sākotnējā box-decoration-breakvērtība ir slice. Apakšējā rindkopā ir clonevērtība.
Raksts un demonstrācija.
Demonstrācija
box-decoration-breakĪpašums ir ierobežots pārlūka atbalstu. Šī demonstrācija vislabāk darbojas pārlūkprogrammā Firefox 37+, kur tā box-decoration-breaktiek pilnībā atbalstīta.
Skatiet CSS-Tricks (@ css-tricks) vietnē CodePen Pen 1074b03653ffb32b88a6f88823c3de34.
Pārlūka atbalsts
Rakstīšanas laikā pilnībā atbalsta tikai Firefox box-decoration-break. Webkit pārlūkprogrammas un Opera daļēji atbalsta box-decoration-breakiekļautos elementus rindiņu pārtraukumos, bet ne kolonnu vai lapu pārtraukumos.
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31 * | 7 * | 37 | 29 * | Nav | 4,4 * | 7,1 * |
* daļējs atbalsts ar -webkitprefiksu.