A box-decoration-breaktulajdonság segítségével szabályozhatja, hogy a dobozdíszek hogyan rajzolódnak át egy „törött” elem töredékein. Egy elem töredékekre törhet a sor végén, az oszlopok felett vagy az oldal törésekor.
.module ( box-decoration-break: clone; )A doboz dekoráció tulajdonságait vezérli box-decoration-breaka következők: background(és altulajdonsággal) border, border-radius, border-image, box-shadow, margin, és padding.
Értékek
slice: a kezdeti érték. A dobozdíszek az elem egészére vonatkoznak, és az elemtöredékek szélein elszakadnak.clone: a díszek az elem minden töredékére vonatkoznak, mintha a töredékek töretlenek lennének, az egyes elemek. A szegélyek beburkolják az elem minden egyes részének négy szélét, és a hátterek teljesen átrajzolódnak az egyes töredékeknél.
Használat
box-decoration-break segíthet a törött elem töredékei közötti konzisztens kialakítás fenntartásában.
Ebben a példaképben egy narancssárga szegélyű és 1em felső margóval rendelkező bekezdés két oszlopra van felosztva. A felső bekezdésnek a kezdeti box-decoration-breakértéke slice. Az alsó bekezdésnek van cloneértéke.
Ennek cikke és bemutatója.
Demó
A box-decoration-breakszálláshely korlátozott böngészőtámogatást biztosít. Ez a bemutató a Firefox 37+ verzióban működik a legjobban, ahol box-decoration-breakteljes mértékben támogatott.
Lásd a CSS-Tricks (@ css-tricks) által a CodePen-en található Pen 1074b03653ffb32b88a6f88823c3de34 tollat.
Böngésző támogatás
Az írás idején csak a Firefox támogatja teljes mértékben box-decoration-break. A Webkit böngészők és az Opera részben támogatják box-decoration-breakaz inline elemeket a sortörések között, de nem az oszlopok vagy az oldalak törései között.
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| 31 * | 7 * | 37 | 29 * | Egyik sem | 4,4 * | 7,1 * |
* részleges támogatás -webkitelőtaggal.