Boîte-décoration-pause - Astuces CSS

La box-decoration-breakpropriété vous permet de contrôler la façon dont les décorations de boîte sont dessinées sur les fragments d'un élément «cassé». Un élément peut se rompre en fragments à la fin d'une ligne, au-dessus des colonnes ou aux sauts de page.

.module ( box-decoration-break: clone; )

Les propriétés de décoration de boîtes contrôlées par box-decoration-breaksont: background(et ses sous- unités ), border, border-radius, border-image, box-shadow, margin, et padding.

Valeurs

slice: la valeur initiale. Les décorations de boîte s'appliquent à l'élément dans son ensemble et se cassent sur les bords des fragments d'élément.
clone: les décorations s'appliquent à chaque fragment de l'élément comme si les fragments étaient des éléments individuels ininterrompus. Les bordures enveloppent les quatre bords de chaque fragment de l'élément et les arrière-plans sont entièrement redessinés pour chaque fragment.

Usage

box-decoration-break peut aider à maintenir une conception cohérente parmi les fragments d'un élément cassé

Dans cet exemple d'image, un paragraphe avec une bordure orange et une marge supérieure de 1em est divisé en deux colonnes. Le paragraphe supérieur a la box-decoration-breakvaleur initiale de slice. Le paragraphe du bas a la clonevaleur.

Article et démo de celui-ci.

Démo

La box-decoration-breakpropriété a une prise en charge limitée du navigateur. Cette démo fonctionne mieux dans Firefox 37+, où elle box-decoration-breakest entièrement prise en charge.

Voir le Pen 1074b03653ffb32b88a6f88823c3de34 par CSS-Tricks (@ css-tricks) sur CodePen.

Prise en charge du navigateur

Au moment d'écrire ces lignes, seul Firefox prend entièrement en charge box-decoration-break. Les navigateurs Webkit et Opera prennent partiellement en charge box-decoration-breakles éléments en ligne sur les sauts de ligne, mais pas sur les sauts de colonne ou de page.