The box-decoration-breakproperti memungkinkan Anda mengontrol bagaimana kotak dekorasi ditarik di seluruh fragmen dari “rusak” elemen. Sebuah elemen bisa pecah menjadi fragmen di akhir baris, di atas kolom, atau di jeda halaman.
.module ( box-decoration-break: clone; )Sifat dekorasi box dikendalikan oleh box-decoration-breakadalah: background(dan sub-sifat-sifatnya), border, border-radius, border-image, box-shadow, margin, dan padding.
Nilai
slice: nilai awal. Dekorasi kotak berlaku untuk elemen secara keseluruhan dan pecah di tepi fragmen elemen.clone: dekorasi berlaku untuk setiap fragmen elemen seolah-olah fragmen tersebut tidak terputus, elemen individual. Perbatasan membungkus empat tepi setiap fragmen elemen, dan latar belakang digambar ulang secara penuh untuk setiap fragmen.
Pemakaian
box-decoration-break dapat membantu mempertahankan desain yang konsisten di antara fragmen elemen yang rusak.
Dalam gambar contoh ini, paragraf dengan batas oranye dan margin atas 1em dipecah menjadi dua kolom. Bagian atas ayat memiliki awal box-decoration-breaknilai slice. Paragraf bawah memiliki clonenilai.
Artikel dan demo itu.
Demo
The box-decoration-breakproperti memiliki dukungan browser terbatas. Demo ini bekerja paling baik di Firefox 37+, box-decoration-breakyang didukung penuh.
Lihat Pen 1074b03653ffb32b88a6f88823c3de34 oleh CSS-Tricks (@ css-trick) di CodePen.
Dukungan Browser
Pada saat tulisan ini dibuat, hanya Firefox yang mendukung penuh box-decoration-break. Browser Webkit dan Opera mendukung sebagian box-decoration-breakpada elemen sebaris di seluruh jeda baris, tetapi tidak di seluruh kolom atau jeda halaman.
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| 31 * | 7 * | 37 | 29 * | Tidak ada | 4,4 * | 7.1 * |
* dukungan parsial dengan -webkitawalan.