CSS-Eigenschaft box-decoration-break

❮ Vorige Nächste ❯

Die CSS-Eigenschaft box-decoration-break gibt an, wie background, padding, border, border-image, box-shadow, margin und clip-path eines Elements eingestellt werden, wenn die Box fragmentiert ist.

Die Eigenschaft box-decoration-break hat zwei Werte. Der erste Wert ist "slice". Der erste Teil des Elements wird so dargestellt, als ob sein Rahmen nicht fragmentiert wäre, dann wird die Darstellung des Rahmens für jede Zeile, Spalte usw. in Stücke geschnitten. Der zweite Wert ist "clone". Hier wird jedes Element unabhängig voneinander mit spezifizierten Eigenschaften ( border, background, padding, margin) dargestellt. Umrandungen umschließen die vier Ränder jedes Fragments des Elements, und Hintergründe werden für jedes Fragment vollständig neu gezeichnet.

Anfangswert	slice
Gilt für	Nein
Geerbt	Nein
Version	CSS3
DOM Syntax	object.style.boxDecorationBreak = "clone";

Syntax

box-decoration-break: slice | clone | initial | inherit | unset;

Hier ist ein Beispiel mit dem Wert "clone", wo die Dekorationen für jedes Fragment gelten, als wären die Fragmente einzelne Elemente.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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;
      -o-box-decoration-break: clone;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für box-decoration-break</h2>
    <p>Hier ist box-decoration-break auf "clone" eingestellt.</p>
    <span class="box">Box<br>decoration<br>break<br>property<br>example.</span>
  </body>
</html>

Versuch es selber!

Ein weiteres Beispiel mit dem Wert "slice". Hier wird die Box in Stücke geschnitten.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      span {
      border: 3px solid #8ebf42;
      padding:  0em 1em;
      border-radius: 12px;
      font-size: 20px;
      line-height: 2;
      background-color: #ccc;
      }
      span.ex2 { 
      -webkit-box-decoration-break: slice;
      -o-box-decoration-break: slice;
      box-decoration-break: slice;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für box-decoration-break</h2>
    <p>Hier ist box-decoration-break auf "slice", der der Anfangswert für diese Eigenschaft ist, eingestellt.</p>
    <span class="box">Box<br>decoration<br>break<br>property<br>example.</span>
  </body>
</html>

Versuch es selber!

Lassen Sie uns nun versuchen, der geschnittenen Box Schatten zu geben.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      span {
      border: 3px solid #8ebf42;
      padding:  0em 1em;
      border-radius: 12px;
      font-size: 20px;
      line-height: 2;
      background-color: #ccc;
      box-shadow: 5px 4px 10px #666;
      box-decoration-break: slice;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für box-decoration-break</h2>
    <p>Hier ist box-decoration-break auf "slice", der der Anfangswert für diese Eigenschaft ist, eingestellt.</p>
    <span>Box<br>decoration<br>break<br>property<br>example.</span>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
slice	Die Box-Dekorationen werden auf das gesamte Element eingestellt und brechen an den Rändern der Elementfragmente.
clone	Die Box-Dekorationen werden für jedes Fragment einzeln festgelegt.
initial	Es setzt die Eigenschaft auf seinen Standardwert.
inherit	Es erbt die Eigenschaft von ihrem übergeordneten Element.