Met deze box-decoration-breakeigenschap kunt u bepalen hoe doosversieringen over de fragmenten van een "gebroken" element worden getekend. Een element kan in fragmenten opsplitsen aan het einde van een regel, over kolommen of bij pagina-einden.
.module ( box-decoration-break: clone; )De decoratie doos eigenschappen bestuurd door box-decoration-breakzijn: background(en de sub-eigenschappen), border, border-radius, border-image, box-shadow, margin, en padding.
Waarden
slice: de beginwaarde. Doosversieringen zijn van toepassing op het element als geheel en breken aan de randen van de elementfragmenten.clone: decoraties zijn van toepassing op elk fragment van het element alsof de fragmenten ongebroken, individuele elementen zijn. Randen omsluiten de vier randen van elk fragment van het element en de achtergronden worden voor elk fragment volledig opnieuw getekend.
Gebruik
box-decoration-break kan helpen om een consistent ontwerp te behouden tussen de fragmenten van een gebroken element.
In deze voorbeeldafbeelding is een alinea met een oranje rand en een bovenmarge van 1em verdeeld over twee kolommen. De bovenste alinea heeft de beginwaarde box-decoration-breakvan slice. De onderste alinea heeft de clonewaarde.
Artikel en demo daarvan.
Demo
De box-decoration-breakaccommodatie heeft beperkte browserondersteuning. Deze demo werkt het beste in Firefox 37+, waar box-decoration-breakvolledig wordt ondersteund.
Zie de Pen 1074b03653ffb32b88a6f88823c3de34 door CSS-Tricks (@ css-tricks) op CodePen.
Browser-ondersteuning
Op het moment van schrijven ondersteunt alleen Firefox volledig box-decoration-break. Webkit-browsers en Opera ondersteunen gedeeltelijk box-decoration-breakinline-elementen over regeleinden heen, maar niet over kolom- of pagina-einden.
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| 31 * | 7 * | 37 | 29 * | Geen | 4,4 * | 7.1 * |
* gedeeltelijke ondersteuning met -webkitvoorvoegsel.