box-decoration-break

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die box-decoration-break CSS Eigenschaft gibt an, wie die Fragmente eines Elements dargestellt werden sollen, wenn sie über mehrere Zeilen, Spalten oder Seiten gebrochen werden.

Probieren Sie es aus

Der angegebene Wert beeinflusst das Erscheinungsbild der folgenden Eigenschaften:

Syntax

css

/* Keyword values */
box-decoration-break: slice;
box-decoration-break: clone;

/* Global values */
box-decoration-break: inherit;
box-decoration-break: initial;
box-decoration-break: revert;
box-decoration-break: revert-layer;
box-decoration-break: unset;

Die box-decoration-break-Eigenschaft wird als eines der unten aufgeführten Schlüsselwortwerte angegeben.

Werte

slice: Das Element wird zunächst so gerendert, als ob seine Box nicht fragmentiert wäre. Anschließend wird das Rendering für diese hypothetische Box in Stücke für jede Zeile/Spalte/Seite geteilt. Beachten Sie, dass die hypothetische Box für jedes Fragment unterschiedlich sein kann, da sie ihre eigene Höhe verwendet, wenn der Bruch in der Inline-Richtung auftritt, und ihre eigene Breite, wenn der Bruch in der Block-Richtung auftritt. Details finden Sie in der CSS-Spezifikation.
clone: Jedes Box-Fragment wird unabhängig mit dem angegebenen Rand, der Füllung und dem Abstand um jedes Fragment herum gerendert. Der border-radius, border-image und box-shadow werden unabhängig auf jedes Fragment angewendet. Der Hintergrund wird ebenfalls unabhängig für jedes Fragment gezeichnet, was bedeutet, dass ein Hintergrundbild mit background-repeat: no-repeat dennoch mehrfach wiederholt werden kann.

Formale Definition

Anfangswert	`slice`
Anwendbar auf	alle Elemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

box-decoration-break = 
  slice  |
  clone

Ein Inline-Element mit einer Box-Dekoration kann ein unerwartetes Erscheinungsbild haben, wenn es Zeilenumbrüche enthält, aufgrund des initialen slice Werts. Das folgende Beispiel zeigt die Wirkung von box-decoration-break: clone auf ein <span>, das <br> Tags enthält:

body {
  display: flex;
  background-color: grey;
  justify-content: space-around;
}

span {
  padding: 0em 1em;
  border-radius: 1rem;
  border-style: solid;
  margin: 1rem;
  font: 22px sans-serif;
  line-height: 2;
}

css

span {
  background: linear-gradient(to bottom right, yellow, green);
  box-shadow:
    8px 8px 10px 0px deeppink,
    -5px -5px 5px 0px blue,
    5px 5px 15px 0px yellow;
}

#clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

html

<p>
  <span>The<br />quick<br />orange fox</span>
</p>
<p>
  <span id="clone">The<br />quick<br />orange fox</span>
</p>

Block-Box-Fragmente

Das folgende Beispiel zeigt, wie Block-Elemente mit Box-Dekoration aussehen, wenn sie in einem Multi-Column-Layout Zeilenumbrüche enthalten. Beachten Sie, wie das Ergebnis von box-decoration-break: slice dem ersten <div> entsprechen würde, wenn es vertikal gestapelt wäre.

body {
  background-color: grey;
}
span {
  padding: 0em 2em;
  border-radius: 250px;
  border-style: solid;
  margin-left: 1em;
  font: 20px sans-serif;
  line-height: 1.5;
}

css

span {
  display: block;
  background: linear-gradient(to bottom right, yellow, green);
  box-shadow:
    inset 8px 8px 10px 0px deeppink,
    inset -5px -5px 5px 0px blue,
    inset 5px 5px 15px 0px yellow;
}
#base {
  width: 33%;
}
.columns {
  columns: 3;
}

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

html

<div id="base">
  <span>The<br />quick<br />orange fox</span>
</div>
<br />

<h2>'box-decoration-break: slice'</h2>
<div class="columns">
  <span>The<br />quick<br />orange fox</span>
</div>

<h2>'box-decoration-break: clone'</h2>
<div class="columns">
  <span class="clone">The<br />quick<br />orange fox</span>
</div>

Spezifikationen

Specification
CSS Fragmentation Module Level 3 # break-decoration

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

break-after, break-before, break-inside