The box-decoration-breakharta membolehkan anda mengawal cara hiasan kotak telah disediakan di seluruh serpihan "rosak" elemen. Elemen boleh dipecah menjadi pecahan di hujung baris, di atas lajur, atau pada pemecahan halaman.
.module ( box-decoration-break: clone; )Ciri-ciri hiasan kotak dikawal oleh box-decoration-breakialah: background(dan sub-sifat-sifatnya), border, border-radius, border-image, box-shadow, margin, dan padding.
Nilai
slice: nilai awal. Hiasan kotak berlaku pada elemen secara keseluruhan dan pecah di tepi serpihan elemen.clone: hiasan berlaku untuk setiap serpihan elemen seolah-olah serpihan itu tidak pecah, elemen individu. Sempadan membungkus empat tepi setiap serpihan elemen, dan latar belakang digambar semula sepenuhnya untuk setiap serpihan.
Penggunaan
box-decoration-break dapat membantu mengekalkan reka bentuk yang konsisten di antara serpihan unsur yang pecah.
Dalam gambar contoh ini, perenggan dengan sempadan oren dan margin atas 1em dipecah di dua lajur. Bahagian perenggan mempunyai awal box-decoration-breaknilai slice. Perenggan bawah mempunyai clonenilai.
Artikel dan demo itu.
Demo
Tempat box-decoration-breakpenginapan ini mempunyai sokongan penyemak imbas terhad. Demo ini berfungsi paling baik di Firefox 37+, di mana box-decoration-breakdisokong sepenuhnya.
Lihat Pen 1074b03653ffb32b88a6f88823c3de34 oleh CSS-Tricks (@ css-tricks) di CodePen.
Sokongan Penyemak Imbas
Pada masa penulisan ini hanya Firefox menyokong penuh box-decoration-break. Penyemak imbas webkit dan Opera sebahagiannya menyokong box-decoration-breakelemen sebaris merentasi jeda baris, tetapi tidak melintasi jurang lajur atau halaman.
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31 * | 7 * | 37 | 29 * | Tiada | 4.4 * | 7.1 * |
* sokongan separa dengan -webkitawalan.