Propriété CSS box-decoration-break

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

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>

Essayez-vous-même!

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>

Essayez-vous-même!

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.