CSS-Eigenschaft box-decoration-break
Die box-decoration-break-Eigenschaft ist eine CSS-Eigenschaft, die festlegt, wie der Hintergrund, Padding, Rand, Border-Image, Box-Schatten, Margin und Clip-Path eines Elements angewendet werden, wenn die Box fragmentiert ist.
Die box-decoration-break-Eigenschaft hat zwei Werte. Der Wert slice wendet Dekorationen auf das gesamte Element an, als wäre es nicht fragmentiert, und schneidet die Box dann an den Rändern jedes Fragments ab. Der Wert clone wendet jede Dekoration unabhängig auf jedes Fragment an. Ränder umschließen die vier Kanten jedes Fragments, und Hintergründe werden für jedes Fragment vollständig neu gezeichnet. Beachten Sie, dass Fragmentierung nicht nur durch Zeilenumbrüche, sondern auch durch Seiten- oder Spaltenumbrüche auftreten kann.
| Anfangswert | slice |
|---|---|
| Anwendbar auf | Block-Elemente, Flex-Container und Grid-Container. |
| Vererbbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.boxDecorationBreak = "clone"; |
Syntax
Syntax der CSS-Eigenschaft box-decoration-break
box-decoration-break: slice | clone | initial | inherit | unset;Hier ist ein Beispiel mit dem Wert clone, bei dem Dekorationen auf jedes Fragment angewendet werden, als wären die Fragments einzelne Elemente.
Beispiel für die CSS-Eigenschaft box-decoration-break mit dem Wert clone
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
border: 3px solid #1c87c9;
padding: 0em 1em;
border-radius: 12px;
font-size: 20px;
line-height: 2;
}
span.box {
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
</style>
</head>
<body>
<h2>Box-decoration-break example</h2>
<p>Here the box-decoration-break is set to "clone".</p>
<span class="box">Box<br />decoration<br />break<br />property<br />example.</span>
</body>
</html>Ergebnis
Moderne Browser unterstützen diese Eigenschaft nativ ohne Präfixe, aber das -webkit--Präfix ist in den Beispielen zur Abwärtskompatibilität enthalten.
Sehen wir uns ein weiteres Beispiel an, bei dem der Wert slice auf die Box angewendet wird. Hier wird die Box in Stücke geschnitten.
Beispiel für die CSS-Eigenschaft box-decoration-break mit dem Wert slice
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
border: 3px solid #8ebf42;
padding: 0em 1em;
border-radius: 12px;
font-size: 20px;
line-height: 2;
background-color: #ccc;
}
span.box {
-webkit-box-decoration-break: slice;
box-decoration-break: slice;
}
</style>
</head>
<body>
<h2>Box-decoration-break example</h2>
<p>
Here the box-decoration-break is set to "slice" which is the default value of this property.
</p>
<span class="box">Box<br />decoration<br />break<br />property<br />example.</span>
</body>
</html>Ergebnis
Nun sehen wir uns an, wie ein Box-Schatten auf die geschnittene Box angewendet wird.
Beispiel für die CSS-Eigenschaft box-decoration-break mit dem Wert slice und Schatten
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
border: 3px solid #8ebf42;
padding: 0em 1em;
border-radius: 12px;
font-size: 20px;
line-height: 2;
background-color: #cccccc;
box-shadow: 5px 4px 10px #666666;
box-decoration-break: slice;
-webkit-box-decoration-break: slice;
}
</style>
</head>
<body>
<h2>Box-decoration-break example</h2>
<p>
Here the box-decoration-break is set to "slice" which is the default value of this property.
</p>
<span>Box<br />decoration<br />break<br />property<br />example.</span>
</body>
</html>Ergebnis
Werte
| Wert | Beschreibung |
|---|---|
| slice | Box-Dekorationen werden auf das gesamte Element angewendet und brechen an den Rändern der Elementfragmente ab. |
| clone | Box-Dekorationen werden einzeln auf jedes Fragment angewendet. |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Praxis
Was macht die CSS-Eigenschaft box-decoration-break?