CSS-Eigenschaft box-decoration-break

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>

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>

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>

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.

Browser-Support

32.0+ 32.0+ 6.1+ 15.0
-webkit-


Finden Sie das nützlich?

Ähnliche Artikel