box-decoration-break

Die Eigenschaft box-decoration-break ermöglicht es Ihnen zu steuern, wie Box-Dekorationen über die Fragmente eines „gebrochenen“ Elements gezeichnet werden. Ein Element kann am Ende einer Zeile, über Spalten oder bei Seitenumbrüchen in Fragmente zerfallen.

.module {
  box-decoration-break: clone;
}

Die von box-decoration-break gesteuerten Box-Dekorationseigenschaften sind: background (und seine Untereigenschaften), border, border-radius, border-image, box-shadow, margin und padding.

Werte

• slice: der Anfangswert. Box-Dekorationen werden auf das gesamte Element angewendet und an den Rändern der Elementfragmente unterbrochen.
• clone: Dekorationen werden auf jedes Fragment des Elements angewendet, als wären die Fragmente ununterbrochene, einzelne Elemente. Rahmen umschließen alle vier Kanten jedes Fragments des Elements, und Hintergründe werden für jedes Fragment vollständig neu gezeichnet.

Verwendung

box-decoration-break kann helfen, ein konsistentes Design unter den Fragmenten eines gebrochenen Elements beizubehalten.

Im Beispielbild ist ein Absatz mit einem orangefarbenen Rahmen und einem oberen Rand von 1em über zwei Spalten verteilt. Der obere Absatz hat den Anfangswert box-decoration-break von slice. Der untere Absatz hat den Wert clone.

Im oberen Absatz wird der Rahmen am Spaltenumbruch durchtrennt, und der obere Rand gilt nur für das erste Fragment. Beim unteren Absatz wird der Rahmen um alle vier Kanten beider Fragmente des Absatzes gezeichnet. Der Rand wird ebenfalls auf jedes Fragment angewendet.

Ein weiterer häufiger Fall ist Inline-Text, der in mehrere Zeilen umbricht. Stile, die auf diese angewendet werden, können seltsam/schlecht aussehen, es sei denn, Sie verwenden clone für die Stile

Artikel und Demo dazu.

Demo

Die Eigenschaft box-decoration-break hat nur begrenzte Browserunterstützung. Diese Demo funktioniert am besten in Firefox 37+, wo box-decoration-break vollständig unterstützt wird.

Siehe den Pen 1074b03653ffb32b88a6f88823c3de34 von CSS-Tricks (@css-tricks) auf CodePen.

Browser-Unterstützung

Zum Zeitpunkt der Erstellung unterstützt nur Firefox box-decoration-break vollständig. Webkit-Browser und Opera unterstützen box-decoration-break teilweise bei Inline-Elementen über Zeilenumbrüche hinweg, jedoch nicht über Spalten- oder Seitenumbrüche hinweg.

Chrome	Safari	Firefox	Opera	IE	Android	iOS
31*	7*	37	29*	Keine	4.4*	7.1*

* Teilweise Unterstützung mit -webkit Präfix.