Prestávka na dekoráciu krabičiek - Triky CSS

Anonim

Táto box-decoration-breakvlastnosť vám umožňuje ovládať, ako sú dekorácie polí nakreslené cez fragmenty „zlomeného“ prvku. Element sa môže rozdeliť na fragmenty na konci riadku, nad stĺpcami alebo na zlomoch stránok.

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

Vlastnosti box dekorácie riadené box-decoration-break, sú: background(a jej podskupiny vlastnosti), border, border-radius, border-image, box-shadow, margin, a padding.

Hodnoty

  • slice: počiatočná hodnota. Dekorácie škatúľ sa vzťahujú na prvok ako celok a lámu sa na okrajoch fragmentov prvku.
  • clone: ozdoby sa vzťahujú na každý fragment prvku, akoby boli fragmenty neprerušené, jednotlivé prvky. Okraje obaľujú štyri okraje každého fragmentu prvku a pozadia sa pre každý fragment prekreslia v plnom rozsahu.

Využitie

box-decoration-break môže pomôcť zachovať konzistentný dizajn medzi fragmentmi zlomeného prvku.

Na tomto príklade obrázku je odsek s oranžovým okrajom a horným okrajom 1em rozdelený na dva stĺpce. Horný odsek má počiatočnú box-decoration-breakhodnotu slice. Dolný odsek má clonehodnotu.

Článok a ukážka z toho.

Ukážka

Toto box-decoration-breakzariadenie má obmedzenú podporu prehľadávača. Táto ukážka funguje najlepšie vo Firefoxe 37+, kde box-decoration-breakje plne podporovaná.

Prečítajte si pero 1074b03653ffb32b88a6f88823c3de34 od CSS-Tricks (@ css-tricks) na stránkach CodePen.

Podpora prehľadávača

V čase písania tohto článku plne podporuje iba Firefox box-decoration-break. Prehliadače Webkit a Opera čiastočne podporujú box-decoration-breakvložené prvky cez konce riadkov, ale nie cez konce stĺpcov alebo stránok.

Chrome Safari Firefox Opera IE Android iOS
31 * 7 * 37 29 * Žiadne 4,4 * 7,1 *

* čiastočná podpora s -webkitpredponou.