box-decoration-breakÖzelliği kutu süslemeleri bir “kırık” elemanın parçaları arasında çizilir nasıl kontrol etmenizi sağlar. Bir öğe bir satırın sonunda, sütunların üzerinde veya sayfa sonlarında parçalara ayrılabilir.
.module ( box-decoration-break: clone; )Tarafından kontrol edilen kutu dekorasyon özellikleri box-decoration-breakşunlardır: background(ve alt-özellikler), border, border-radius, border-image, box-shadow, margin, ve padding.
Değerler
slice: başlangıç değeri. Kutu süsleri elemana bir bütün olarak uygulanır ve eleman parçalarının kenarlarında kırılır.clone: Süslemeler öğenin her bir parçasına, parçalar kırılmamış, ayrı öğelermiş gibi uygulanır. Kenarlıklar, öğenin her bir parçasının dört kenarını sarar ve arka planlar her parça için tam olarak yeniden çizilir.
Kullanım
box-decoration-break kırık bir elemanın parçaları arasında tutarlı bir tasarımın korunmasına yardımcı olabilir.
Bu örnek görüntüde, turuncu kenarlıklı ve 1em üst kenar boşluğuna sahip bir paragraf iki sütuna bölünmüştür. Üst paragrafın başlangıç box-decoration-breakdeğeri var slice. En alttaki paragrafın clonedeğeri var.
Makale ve bunun demosu.
Demo
box-decoration-breakMülkiyet, sınırlı tarayıcı desteği vardır. Bu demo box-decoration-break, tam olarak desteklendiği Firefox 37+ ile en iyi şekilde çalışır .
CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Kalem 1074b03653ffb32b88a6f88823c3de34'e bakın.
Tarayıcı Desteği
Bu yazının yazıldığı tarihte yalnızca Firefox tam olarak desteklemektedir box-decoration-break. Webkit tarayıcıları ve Opera box-decoration-break, satır sonları boyunca satır içi öğeleri kısmen destekler , ancak sütun veya sayfa sonlarında desteklemez.
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31 * | 7 * | 37 | 29 * | Yok | 4.4 * | 7.1 * |
* -webkitÖnek ile kısmi destek .