CSS/Eigenschaften/äußere Gestaltung/box-decoration-break

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft box-decoration-break legt fest, wie mit Hintergründen und Rahmen zu verfahren ist, falls die Element-Box in mehrere Fragmente geteilt werden muss. Das kann etwa geschehen, wenn ein Blockelement beim Ausdrucken auf zwei Blätter verteilt wird oder ein inline-Element mehrere Zeilen beansprucht.

  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

Details: caniuse.com

Beispiel ansehen …
.beispiel h3 {
      display: inline;
      line-height: 3;
      background-image: linear-gradient(to right, #df6c20 30%, #ffede0 70%);
      border: 3px solid #df6c20;
      border-radius: .5em;
      box-shadow: .2em .2em .5em #df6c20;
      margin: 1em;
      padding: .3em 1em;
 
      box-decoration-break: slice;
 
}
.clone h3 {
      box-decoration-break: clone;
}
Für die Überschriften im Beispiel, die als inline-Elemente dargestellt werden, sind verschiedene Angaben zu Hintergründen, Rahmen und Abständen gemacht worden. Die Gegenüberstellung zeigt die Auswirkungen der verschiedenen Werte.

Mit box-decoration-break bestimmen Sie das Verhalten unterbrochener Boxen. Folgende Angaben sind möglich:

  • clone, jeder Teilbereich bekommt seinen eigenen Hintergrund und Rahmen
  • slice, es wird nur ein Hintergrund und ein Rahmen dargestellt, Voreinstellung.

Wird box-decoration-break: clone; gewählt, so wird ggf. für jede einzelne Box der Hintergrund neu ermittelt, das betrifft die Werte für

Ebenso bekommt jede Box ihre eigenen

sowie

Die Außenlinie ist hingegen nicht betroffen.

[Bearbeiten] Browser-Support

Achtung!

Die Eigenschaft box-decoration-break ist derzeit (Stand: November 2016) noch nicht in alle aktuelle Browser implementiert, deshalb muss man proprietäre Eigenschaften verwenden:
für Chrome, Opera, Safari -webkit-box-decoration-break
für Android-Browser -webkit-box-decoration-break

Details: caniuse.com

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML