Propriété CSS box-decoration-break

La propriété box-decoration-break est une propriété CSS qui spécifie comment les background, padding, border, border-image, box-shadow, margin, et clip-path d'un élément sont définis, quand la boîte est divisé.

La propriété box-decoration-break a deux valeurs. La première valeur est "slice". La première partie de l'élément est affichée comme si sa boîte n'était pas divisé, ensuite, l'affichement de la boîte est coupé en morceaux pour chaque ligne, colonne, etc. La deuxième valeur est "clone". Ici chaque élément est affiché indépendamment avec les propriétés spécifiées ( border, background, padding, margin). Les bordures emballent les quatre côtés de chaque morceau de l'élément, et les arrière-plans sont complètement redessinés pour chaque morceau.

Valeur initiale slice
Appliquée à Non.
Héritée Non.
Version CSS3
Syntaxe DOM object.style.boxDecorationBreak = "clone";

Syntaxe

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

Voici un exemple avec la valeur "clone", où les decorations s'appliquent à chaque morceau comme si les morceaux étaient des éléments individuels.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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;
      -o-box-decoration-break: clone;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de box-decoration-break</h2>
    <p>Ici box-decoration-break est définie comme "clone".</p>
    <span class="box">Exemple<br>de<br>box<br>decoration<br>break.</span>
  </body>
</html>

Voyons un autre exemple, où la valeur "slice" est appliquée à la boîte. Ici la boîte est coupée en morceaux.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</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>Exemple de box-decoration-break</h2>
    <p>Ici box-decoration-break est définie à "slice" qui est la valeur initiale de cette propriété.</p>
    <span class="box">Exemple<br>de<br>box<br>decoration<br>break.</span>
  </body>
</html>

Maintenant donnones un ombre à la boîte coupée.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</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>Exemple de box-decoration-break</h2>
    <p>Ici box-decoration-break est définie à "slice" qui est la valeur initiale de cette propriété.</p>
    <span>Exemple<br>de<br>box<br>decoration<br>break.</span>
  </body>
</html>

Valeurs

Valeur Description
slice Décorations de la boîte sont définies pour l'élément entier et elles cassent aux bords des morceaux de l'élément.
clone Décorations de la boîte sont définies pour chaque morceau individuellement.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

32.0+ 32.0+ 6.1+ 15.0
-webkit-


Trouvez-vous cela utile?

Articles Associées