Boks-dekorasjon-pause - CSS-triks

Den box-decoration-breakegenskapen lar deg kontrollere hvordan boks dekorasjoner er trukket over de fragmenter av en “ødelagt” element. Et element kan brytes inn i fragmenter på slutten av en linje, over kolonner eller ved sideskift.

.module ( box-decoration-break: clone; )

Boksen dekorasjonsegenskaper som kontrolleres av box-decoration-breaker: background(og dens underegenskaper), border, border-radius, border-image, box-shadow, margin, og padding.

Verdier

slice: den opprinnelige verdien. Boksdekorasjoner gjelder elementet som helhet og bryter i kantene på elementfragmentene.
clone: dekorasjoner gjelder hvert fragment av elementet som om fragmentene var ubrutte, individuelle elementer. Kanter vikler de fire kantene av hvert fragment av elementet, og bakgrunner tegnes på nytt for hvert fragment.

Bruk

box-decoration-break kan bidra til å opprettholde en jevn design blant fragmentene av et ødelagt element.

I dette eksemplet er et avsnitt med en oransje kant og en toppmarg på 1 em delt over to kolonner. Det øverste avsnittet har startverdien box-decoration-breakpå slice. Det nederste avsnittet har cloneverdien.

Artikkel og demo av det.

Demo

Den box-decoration-breakEiendommen har begrenset nettleser støtter. Denne demoen fungerer best i Firefox 37+, der box-decoration-breakstøttes fullt ut.

Se pennen 1074b03653ffb32b88a6f88823c3de34 av CSS-Tricks (@ css-tricks) på CodePen.

Nettleserstøtte

I skrivende stund støtter bare Firefox fullt ut box-decoration-break. Webkit-nettlesere og Opera støtter delvis box-decoration-breakpå innebygde elementer på tvers av linjeskift, men ikke over kolonne- eller sideskift.