La box-decoration-breakproprietà consente di controllare il modo in cui le decorazioni delle scatole vengono disegnate sui frammenti di un elemento "rotto". Un elemento può suddividersi in frammenti alla fine di una riga, sopra le colonne o alle interruzioni di pagina.
.module ( box-decoration-break: clone; )Le proprietà casella decorazione controllate da box-decoration-breaksono: background(e sue sotto-proprietà), border, border-radius, border-image, box-shadow, margin, e padding.
Valori
slice: il valore iniziale. Le decorazioni della scatola si applicano all'elemento nel suo insieme e si rompono ai bordi dei frammenti dell'elemento.clone: le decorazioni si applicano ad ogni frammento dell'elemento come se i frammenti fossero ininterrotti, singoli elementi. I bordi avvolgono i quattro bordi di ogni frammento dell'elemento e gli sfondi vengono ridisegnati completamente per ogni frammento.
Utilizzo
box-decoration-break può aiutare a mantenere un design coerente tra i frammenti di un elemento rotto.
In questa immagine di esempio, un paragrafo con un bordo arancione e un margine superiore di 1em è suddiviso su due colonne. Il paragrafo in alto ha il box-decoration-breakvalore iniziale di slice. Il paragrafo in basso ha il clonevalore.
Articolo e demo di quello.
Demo
La box-decoration-breakproprietà ha un supporto browser limitato. Questa demo funziona meglio in Firefox 37+, dove box-decoration-breakè completamente supportata.
Vedi la penna 1074b03653ffb32b88a6f88823c3de34 di CSS-Tricks (@ css-tricks) su CodePen.
Supporto browser
Al momento della stesura di questo articolo, solo Firefox supporta completamente box-decoration-break. I browser Webkit e Opera supportano parzialmente gli box-decoration-breakelementi in linea tra le interruzioni di riga, ma non tra le interruzioni di colonna o di pagina.
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31 * | 7 * | 37 | 29 * | Nessuna | 4.4 * | 7.1 * |
* supporto parziale con -webkitprefisso.