Propriété CSS box-decoration-break
La propriété box-decoration-break est une propriété CSS qui spécifie comment l'arrière-plan, la marge intérieure, la bordure, l'image de bordure, l'ombre de boîte, la marge et le chemin de découpe d'un élément sont appliqués lorsque la boîte est fragmentée.
La propriété box-decoration-break possède deux valeurs. La valeur slice applique les décorations à l'élément entier comme s'il n'était pas fragmenté, puis découpe la boîte au niveau des bords de chaque fragment. La valeur clone applique chaque décoration à chaque fragment indépendamment. Les bordures entourent les quatre bords de chaque fragment, et les arrière-plans sont entièrement redessinés pour chaque fragment. Notez que la fragmentation peut se produire non seulement en raison de sauts de ligne, mais aussi de sauts de page ou de colonnes.
| Valeur initiale | slice |
|---|---|
| S'applique à | Éléments de niveau bloc, conteneurs flex et conteneurs grille. |
| Héritée | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.boxDecorationBreak = "clone"; |
Syntaxe
Syntaxe de la propriété CSS box-decoration-break
box-decoration-break: slice | clone | initial | inherit | unset;Voici un exemple avec la valeur clone, où les décorations s'appliquent à chaque fragment comme si les fragments étaient des éléments individuels.
Exemple de la propriété CSS box-decoration-break avec la valeur 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>Résultat
Les navigateurs modernes prennent en charge cette propriété nativement sans préfixes, mais le préfixe -webkit- est inclus dans les exemples pour assurer la compatibilité avec les anciennes versions.
Voyons un autre exemple où la valeur slice est appliquée à la boîte. Ici, la boîte est découpée en morceaux.
Exemple de la propriété CSS box-decoration-break avec la valeur 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>Résultat
Voyons maintenant comment une ombre de boîte est appliquée à la boîte découpée.
Exemple de la propriété CSS box-decoration-break avec la valeur slice et une ombre
<!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>Résultat
Valeurs
| Valeur | Description |
|---|---|
| slice | Les décorations de la boîte sont appliquées à l'élément entier et se coupent aux bords des fragments de l'élément. |
| clone | Les décorations de la boîte sont appliquées à chaque fragment individuellement. |
| initial | Définit la propriété sur sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que fait la propriété CSS box-decoration-break ?