Mit der box-decoration-breakEigenschaft können Sie steuern, wie Boxdekorationen über die Fragmente eines „gebrochenen“ Elements gezogen werden. Ein Element kann am Ende einer Zeile, über Spalten oder bei Seitenumbrüchen in Fragmente zerfallen.
.module ( box-decoration-break: clone; )Die Box Dekorationseigenschaften gesteuert box-decoration-breakwerden: background(und seine Untereigenschaften), border, border-radius, border-image, box-shadow, margin, und padding.
Werte
slice: der Anfangswert. Kastendekorationen gelten für das gesamte Element und brechen an den Rändern der Elementfragmente.clone: Dekorationen gelten für jedes Fragment des Elements, als ob die Fragmente ungebrochen wären, einzelne Elemente. Rahmen umschließen die vier Kanten jedes Fragments des Elements, und die Hintergründe werden für jedes Fragment vollständig neu gezeichnet.
Verwendung
box-decoration-break kann dazu beitragen, ein konsistentes Design zwischen den Fragmenten eines defekten Elements aufrechtzuerhalten.
In diesem Beispielbild ist ein Absatz mit einem orangefarbenen Rand und einem oberen Rand von 1em in zwei Spalten unterteilt. Der oberste Absatz hat den Anfangswert box-decoration-breakvon slice. Der untere Absatz hat den cloneWert.
Artikel und Demo davon.
Demo
Die box-decoration-breakEigenschaft hat eingeschränkte Browserunterstützung. Diese Demo funktioniert am besten in Firefox 37+, wo sie box-decoration-breakvollständig unterstützt wird.
Siehe den Stift 1074b03653ffb32b88a6f88823c3de34 von CSS-Tricks (@ css-Tricks) auf CodePen.
Browser-Unterstützung
Zum Zeitpunkt dieses Schreibens wird nur Firefox vollständig unterstützt box-decoration-break. Webkit-Browser und Opera unterstützen teilweise box-decoration-breakInline-Elemente über Zeilenumbrüche hinweg, jedoch nicht über Spalten- oder Seitenumbrüche hinweg.
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31 * | 7 * | 37 | 29 * | Keiner | 4,4 * | 7.1 * |
* teilweise Unterstützung mit -webkitPräfix.