Den box-decoration-breakegenskapen kan du styra hur skrin dekorationer dras över fragment av en ”bruten” element. Ett element kan bryta upp i fragment i slutet av en rad, över kolumner eller vid sidbrytningar.
.module ( box-decoration-break: clone; )Rutan dekoration egenskaper som styrs av box-decoration-breakär: background(och dess under egenskaper), border, border-radius, border-image, box-shadow, margin, och padding.
Värden
slice: det ursprungliga värdet. Boxdekorationer gäller elementet som helhet och bryts vid kanterna på elementfragmenten.clone: dekorationer gäller för varje fragment av elementet som om fragmenten var obrutna, enskilda element. Kanter omsluter de fyra kanterna på varje fragment av elementet, och bakgrunder ritas om helt för varje fragment.
Användande
box-decoration-break kan hjälpa till att upprätthålla en konsekvent design bland fragmenten av ett trasigt element.
I det här exemplet avbildas ett stycke med en orange kant och en 1m toppmarginal över två kolumner. Det översta stycket har det ursprungliga box-decoration-breakvärdet på slice. Det nedre stycket har clonevärdet.
Artikel och demo av det.
Demo
Den box-decoration-breakFastigheten har begränsat stöd webbläsare. Denna demo fungerar bäst i Firefox 37+, där box-decoration-breakstöds fullt ut.
Se pennan 1074b03653ffb32b88a6f88823c3de34 av CSS-Tricks (@ css-tricks) på CodePen.
Webbläsarstöd
När detta skrivs stöder endast Firefox helt box-decoration-break. Webkit-webbläsare och Opera stöder delvis box-decoration-breakpå inbyggda element över radbrytningar, men inte över kolumn- eller sidbrytningar.
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31 * | 7 * | 37 | 29 * | Ingen | 4,4 * | 7,1 * |
* delvis stöd med -webkitprefix.