Box-decoration-break - Triky CSS

Tato box-decoration-breakvlastnost vám umožňuje ovládat, jak jsou ozdoby krabic kresleny přes fragmenty „rozbitého“ prvku. Prvek se může rozdělit na fragmenty na konci řádku, přes sloupce nebo na konci stránky.

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

Vlastnosti box dekorace řízené box-decoration-break, jsou: background(a její podskupiny vlastnosti), border, border-radius, border-image, box-shadow, margin, a padding.

Hodnoty

slice: počáteční hodnota. Ozdoby krabic se vztahují na prvek jako celek a lámou se na okrajích fragmentů prvku.
clone: dekorace platí pro každý fragment prvku, jako by byly fragmenty neporušené, jednotlivé prvky. Okraje obalují čtyři hrany každého fragmentu prvku a pozadí je pro každý fragment překresleno v plném rozsahu.

Používání

box-decoration-break může pomoci udržovat konzistentní design mezi fragmenty rozbitého prvku.

V tomto příkladu obrázku je odstavec s oranžovým okrajem a horním okrajem 1em rozdělen mezi dva sloupce. Horní odstavec má počáteční box-decoration-breakhodnotu slice. Dolní odstavec má clonehodnotu.

Článek a demo toho.

Ukázka

Služba box-decoration-breakmá omezenou podporu prohlížeče. Tato ukázka funguje nejlépe ve Firefoxu 37+, kde box-decoration-breakje plně podporována.

Podívejte se na pero 1074b03653ffb32b88a6f88823c3de34 od CSS-Tricks (@ css-tricks) na CodePen.

Podpora prohlížeče

V době psaní tohoto článku plně podporuje pouze Firefox box-decoration-break. Prohlížeče Webkit a Opera částečně podporují box-decoration-breakvložené prvky přes konce řádků, ale ne přes konce sloupců nebo stránek.