box-decoration-breakOminaisuus voit määrittää, miten laatikko koristeet piirretään poikki sirpaleita ”rikki” elementti. Elementti voi hajota palasiksi rivin lopussa, sarakkeiden yli tai sivunvaihdoksi.
.module ( box-decoration-break: clone; )Laatikko sisustus ominaisuudet ohjataan box-decoration-breakovat: background(ja sen osa-ominaisuudet), border, border-radius, border-image, box-shadow, margin, ja padding.
Arvot
slice: alkuarvo. Laatikkokoristeet koskevat koko elementtiä ja katkeavat elementin fragmenttien reunoilla.clone: koristeet koskevat elementin kutakin fragmenttia ikään kuin fragmentit olisivat katkeamattomia, yksittäisiä elementtejä. Reunat kääri elementin jokaisen fragmentin neljä reunaa, ja taustat piirretään kokonaan kutakin fragmenttia kohden.
Käyttö
box-decoration-break voi auttaa säilyttämään yhtenäisen muotoilun rikkoutuneen elementin palasissa.
Tässä esimerkkikuvassa kappale, jossa on oranssi reunus ja 1em ylämarginaali, on jaettu kahteen sarakkeeseen. Ylimmän kappaleen alkuperäinen box-decoration-breakarvo on slice. Alimmassa kappaleessa on clonearvo.
Tämän artikkeli ja esittely.
Demo
box-decoration-breakOmaisuus on rajoitettu selain tukee. Tämä esittely toimii parhaiten Firefox 37+: ssa, jossa box-decoration-breaksitä tuetaan täysin.
Katso CSS-Tricksin (@ css-tricks) kynä 1074b03653ffb32b88a6f88823c3de34 CodePenistä.
Selaimen tuki
Tämän kirjoituksen aikaan vain Firefox tukee täysin box-decoration-break. Webkit-selaimet ja Opera tukevat osittain box-decoration-breakinline-elementtejä rivinvaihdoissa, mutta eivät sarake- tai sivuerissä.
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31 * | 7 * | 37 | 29 * | Ei mitään | 4,4 * | 7,1 * |
* osittainen tuki -webkitetuliitteellä.