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 legt fest, 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
/* 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 einer der unten aufgelisteten Schlüsselwortwerte angegeben.
Werte
slice
-
Das Element wird zunächst gerendert, als ob seine Box nicht fragmentiert wäre, danach wird das Rendering dieses hypothetischen Kastens in Stücke für jede Zeile/Spalte/Seite geschnitten. Beachten Sie, dass der hypothetische Kasten für jedes Fragment unterschiedlich sein kann, da er seine eigene Höhe verwendet, wenn der Bruch in der Inline-Richtung auftritt, und seine eigene Breite, wenn der Bruch in der Blockrichtung auftritt. Siehe die CSS-Spezifikation für Details.
clone
-
Jedes Kastenfragment wird unabhängig mit dem angegebenen Rand, der Polsterung und dem Abstand gerendert, die jedes Fragment umgeben. Der
border-radius
,border-image
undbox-shadow
werden auf jedes Fragment unabhängig angewendet. Der Hintergrund wird ebenfalls unabhängig für jedes Fragment gezeichnet, was bedeutet, dass ein Hintergrundbild mitbackground-repeat: no-repeat
trotzdem mehrfach wiederholt werden kann.
Formale Definition
Initialer Wert | slice |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
box-decoration-break =
slice |
clone
Beispiele
Inline-Kastenfragmente
Ein Inline-Element mit einer Kastendekoration kann ein unerwartetes Erscheinungsbild haben, wenn es Zeilenumbrüche enthält, aufgrund des anfänglichen slice
Wertes. Das folgende Beispiel zeigt die Wirkung von box-decoration-break: clone
auf einen <span>
, der <br>
Tags enthält:
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;
}
<p>
<span>The<br />quick<br />orange fox</span>
</p>
<p>
<span id="clone">The<br />quick<br />orange fox</span>
</p>
Block-Kastenfragmente
Das folgende Beispiel zeigt, wie Blockelemente mit Kastendekoration aussehen, wenn sie Zeilenumbrüche in einem Multi-Spalten-Layout enthalten. Beachten Sie, wie das Ergebnis von box-decoration-break: slice
das Äquivalent des ersten <div>
wäre, wenn sie vertikal gestapelt wären.
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;
}
<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