Den box-decoration-breakegenskab lader dig styre, hvordan box dekorationer er tegnet på tværs af de fragmenter af en ”brudt” element. Et element kan bryde op i fragmenter i slutningen af en linje, over kolonner eller ved sideskift.
.module ( box-decoration-break: clone; )The box dekoration egenskaber kontrolleres af box-decoration-breaker: background(og dens undergrupper egenskaber), border, border-radius, border-image, box-shadow, margin, og padding.
Værdier
slice: den oprindelige værdi. Boksdekorationer gælder for elementet som helhed og bryder ved kanterne af elementfragmenterne.clone: dekorationer gælder for hvert fragment af elementet, som om fragmenterne var ubrudte, individuelle elementer. Kanter ombryder de fire kanter på hvert fragment af elementet, og baggrunde tegnes fuldt ud for hvert fragment.
Anvendelse
box-decoration-break kan hjælpe med at opretholde et ensartet design blandt fragmenterne af et brudt element.
I dette eksempelbillede er et afsnit med en orange kant og en 1-top-margen opdelt i to kolonner. Det øverste afsnit har den oprindelige box-decoration-breakværdi på slice. Det nederste afsnit har cloneværdien.
Artikel og demo af det.
Demo
Den box-decoration-breakegenskab har begrænset browser support. Denne demo fungerer bedst i Firefox 37+, hvor box-decoration-breakunderstøttes fuldt ud.
Se pennen 1074b03653ffb32b88a6f88823c3de34 af CSS-Tricks (@ css-tricks) på CodePen.
Browsersupport
På dette tidspunkt understøtter kun Firefox fuldt ud box-decoration-break. Webkit-browsere og Opera understøtter delvist box-decoration-breakindbyggede elementer på tværs af linjeskift, men ikke på tværs af kolonne- eller sideskift.
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31 * | 7 * | 37 | 29 * | Ingen | 4,4 * | 7,1 * |
* delvis støtte med -webkitpræfiks.