Ta box-decoration-breakwłaściwość pozwala kontrolować sposób rysowania dekoracji pudełek na fragmentach „zepsutego” elementu. Element może rozpadać się na fragmenty na końcu wiersza, w kolumnach lub w miejscach podziału strony.
.module ( box-decoration-break: clone; )Właściwości dekoracji skrzyni sterowane box-decoration-breaksą następujące: background(i podgrup Właściwości) border, border-radius, border-image, box-shadow, margin, i padding.
Wartości
slice: wartość początkowa. Dekoracje pudełkowe nakładają się na element jako całość i łamią się na krawędziach fragmentów elementu.clone: dekoracje dotyczą każdego fragmentu elementu tak, jakby fragmenty były nieprzerwane, poszczególne elementy. Krawędzie otaczają cztery krawędzie każdego fragmentu elementu, a tła są przerysowywane w całości dla każdego fragmentu.
Stosowanie
box-decoration-break może pomóc w utrzymaniu spójnego projektu wśród fragmentów zepsutego elementu.
Na tym przykładowym obrazie akapit z pomarańczową obwódką i górnym marginesem 1-em jest podzielony na dwie kolumny. Górny akapit ma box-decoration-breakwartość początkową slice. Dolny akapit zawiera clonewartość.
Artykuł i demo tego.
Próbny
Usługa box-decoration-breakma ograniczoną obsługę przeglądarki. To demo działa najlepiej w przeglądarce Firefox 37+, gdzie box-decoration-breakjest w pełni obsługiwane.
Zobacz Pen 1074b03653ffb32b88a6f88823c3de34 autorstwa CSS-Tricks (@ css-tricks) na CodePen.
Wsparcie przeglądarki
W chwili pisania tego tekstu w pełni obsługuje tylko przeglądarkę Firefox box-decoration-break. Przeglądarki Webkit i Opera częściowo obsługują box-decoration-breakelementy wbudowane w podziale na podziały wierszy, ale nie na podziałach kolumn lub stron.
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| 31 * | 7 * | 37 | 29 * | Żaden | 4,4 * | 7,1 * |
* częściowe wsparcie z -webkitprefiksem.