box-decoration-break

La propriété box-decoration-break définit la façon dont les propriétés background, padding, border, border-image, box-shadow, margin et clip sont appliqués sur un élément lorsque la boîte de celui-ci est fragmentée. La fragmentation apparaît lorsqu'une boîte en ligne s'étend sur plusieurs lignes ou lorsqu'un bloc s'étend sur plus d'une colonne lorsque qu'il est dans conteneur disposé en colonne ou lorsqu'un bloc déclenche un saut de page sur un média imprimé. Chaque « morceau » de l'élément est alors appelé un fragment.

Syntaxe

box-decoration-break: slice;
box-decoration-break: clone;

box-decoration-break: initial;
box-decoration-break: inherit;
box-decoration-break: unset;

Valeurs

slice

L'élément est affiché comme si la boîte n'était pas fragmentée pour puis le rendu de cette boîte hypothétique est découpé en fragments pour chaque ligne/colonne/page. On notera que la boîte hypothétique peut être différente pour chaque fragment car elle utilise sa propre hauteur (si la rupture apparaît dans la direction de l'élément) ou sa propre largeur (si la rupture apparaît dans la direction orthogonale). C'est la valeur initiale de la propriété.

clone

Le rendu de chaque fragment de boîte est obtenu indépendamment avec la bordure, le remplissage, la marge indiqués pour chacun des fragments. Les propriétés border-radius, border-image et box-shadow sont appliquées indépendamment à chaque fragment. L'arrière-plan est dessiné indépendamment pour chaque fragment (ainsi, une image d'arrière-plan avec background-repeat: no-repeat pourra être présente à plusieurs reprises).

Syntaxe formelle

slice | clone

Exemples

Gestion des fragments pour les boîtes en ligne

Avec slice (valeur initiale)

CSS

.exemple {
  background: linear-gradient(to bottom right, yellow, green); 
  box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow; 
  padding: 0em 1em; 
  border-radius: 16px; 
  border-style: solid; 
  margin-left: 10px; 
  font: 24px sans-serif; 
  line-height: 2;
}

HTML

<span class="exemple">The<br>quick<br>orange fox</span>

Résultat live

Image équivalente

Avec clone

CSS

.exemple {
  background: linear-gradient(to bottom right, yellow, green);
  box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow; 
  padding: 0em 1em;
  border-radius: 16px;
  border-style: solid;
  margin-left: 10px;
  font: 24px sans-serif;
  line-height: 2;

 -webkit-box-decoration-break: clone;
 -o-box-decoration-break: clone;
  box-decoration-break: clone;
}

HTML

<span class="exemple">The<br>quick<br>orange fox</span>

Résultat live

Image équivalente

Results in:

Gestion des fragments pour les boîtes en bloc

Voici ce qu'on pourra obtenir de façon analogue avec un élément de bloc :

1. Sans fragmentation

2. En décomposant le bloc sur trois colonnes, normalement (slice), on aura :

3. Si on applique box-decoration-break:clone, voici le résultat :

Spécifications

Compatibilité des navigateurs

[1] Avant Firefox 32, Gecko implémentait une version non-standard de cette propriété : -moz-background-inline-policy. Cette propriété n'est plus prise en charge depuis Firefox 32.