box-decoration-breakNuosavybė leidžia jums kontroliuoti, kaip dėžutė dekoracijos sudarytas skersai "skaldyti" elementas fragmentų. Elementas gali suskaidyti į fragmentus eilutės gale, virš stulpelių arba pertraukose.
.module ( box-decoration-break: clone; )Lovinės apdailos savybės kontroliuojamos box-decoration-breakyra: background(ir jos pogrupių savybės), border, border-radius, border-image, box-shadow, margin, ir padding.
Vertybės
slice: pradinė vertė. Dėžutės dekoracijos taikomos visam elementui ir lūžta elemento fragmentų kraštuose.clone: dekoracijos taikomos kiekvienam elemento fragmentui, tarsi fragmentai būtų nenutrūkstami, atskiri elementai. Sienos apgaubia keturis kiekvieno elemento fragmento kraštus, o kiekvieno fragmento fonai yra perbraižyti.
Naudojimas
box-decoration-break gali padėti išlaikyti nuoseklų dizainą tarp sugedusio elemento fragmentų.
Šiame paveikslėlio pavyzdyje pastraipa su oranžiniu kraštu ir 1em viršutine paraštė yra padalinta per du stulpelius. Viršutinės pastraipos pradinė box-decoration-breakvertė yra slice. Apatinė pastraipa turi clonevertę.
Straipsnis ir demonstracinė versija.
Demonstracija
box-decoration-breakViešbutyje yra ribotas naršyklės paramą. Ši demonstracinė versija geriausiai veikia naršyklėje „Firefox 37+“, kur ji box-decoration-breakyra visiškai palaikoma.
Peržiūrėkite CSS-Tricks (@ css-tricks) „CodePen“ rašiklį 1074b03653ffb32b88a6f88823c3de34
Naršyklės palaikymas
Šiuo metu tik „Firefox“ palaiko visiškai box-decoration-break. „Webkit“ naršyklės ir „Opera“ iš dalies palaiko box-decoration-breakįterptinius elementus eilučių pertraukose, bet ne stulpelių ar puslapių pertraukose.
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| 31 * | 7 * | 37 | 29 * | Nė vienas | 4,4 * | 7,1 * |
* dalinė parama su -webkitpriešdėliu.