Form-utenfor - CSS-triks

Anonim

De shape-outsideeiendoms styrer hvordan innholdet vil vikle rundt en fløt element markerings-box. Vanligvis er dette slik at teksten kan flyte over en form som en sirkel, ellips eller en polygon:

.element ( float: left; shape-outside: circle(50%); width: 200px; height: 200px; )

Det er viktig å merke seg at denne eiendommen bare fungerer på flytende elementer foreløpig, selv om dette sannsynligvis vil endre seg i fremtiden. Den shape-outsideegenskap kan også manipuleres med overganger eller animasjoner.

Verdier

  • circle(): for å lage sirkulære former.
  • ellipse(): for å lage elliptiske former.
  • inset(): for å lage rektangulære former.
  • polygon(): for å lage en hvilken som helst form med 3 eller flere hjørner.
  • url(): identifiserer hvilket bilde som skal brukes til å pakke inn tekst.
  • initial: flottørområdet er upåvirket.
  • inherit: arver shape-outsideverdi fra foreldrene.

Følgende verdier identifiserer hvilken referanse til boksmodellen som skal brukes for å plassere formen innenfor:

  • margin-box
  • padding-box
  • border-box

Disse verdiene skal legges til slutten, for eksempel: shape-outside: circle(50% at 0 0) padding-box. Som standard vil margin-boxreferansen bli brukt.

ellips ()

.element ( shape-outside: ellipse(150px 300px at 50% 50%); )

Den ellipse()funksjonen krever radius-verdiene for x, y-aksen til ellipsen, etterfulgt av koordinatene anbringe sentrum av formen i sin avgrensningsboksen. For eksempel vil eksemplet ovenfor plassere sentrum av ellipsen i det vertikale og horisontale sentrum av .elementdiv:

Selv om demoen ovenfor kan tyde på at vi endrer formen på seg divselv, hvis vi legger til grenser og et bakgrunnsbilde, vil vi finne at avgrensningsboksen faktisk fortsatt er rektangulær:

Det kan være bedre å tenke på det på denne måten: Med shape-outsideeiendommen endrer vi forholdet mellom andre elementer rundt et element, ikke geometrien til selve elementet. For å fikse det må vi bruke shape-outsideved siden av clip-path()eiendommen, som i dette eksemplet:

sirkel()

.element ( shape-outside: circle(50%); )

Denne funksjonen oppretter en sirkel, og i kodeeksemplet ovenfor vil den opprette en sirkel med en radius som er halvparten av høyden og bredden av .element. Den circle()funksjon kan også benytte den samme syntaks for å posisjonere form innen.

url ()

.element ( shape-outside: url('circle.png.webp'); )

I dette tilfellet har vi to flytende bilder, ett på hver side av en tekstblokk. Siden begge bildene har shape-outsideegenskapen satt, vil teksten under unngå de to flyter.

Det er også mulig å angi shape-image-thresholdegenskapen som vil informere nettleseren om hvilke piksler, avhengig av gjennomsiktighet, som skal skape formen. For eksempel:

.element ( shape-outside: url('image.png.webp'); shape-image-threshold: 0.5; )

I dette eksemplet må de eneste pikslene som vil skape formen ha 50% gjennomsiktighet og over. Verdier fra 0.0(gjennomsiktig) til 1.0(ugjennomsiktig) er gyldige.

polygon ()

.element ( shape-outside: polygon(0 0, 0 200px, 300px 600px); )

Denne funksjonen skaper en hvilken som helst form som har tre eller flere hjørner, for eksempel:

Det er viktig å merke seg at hvis denne egenskapen skal animeres, krever det samme antall hjørner når du erklærer den animerte tilstanden:

.element ( shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: shape-outside 1s; ) .element:hover ( shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%); )

innfelt ()

.element ( shape-outside: inset(100px 100px 100px 100px 10px); /* shape-outside: inset(top right bottom left border-radius); */ )

inset()er en funksjon for å lage rektangulære former, det tar fem parametere, men den femte, for border-radiuser valgfri. De andre argumentene er forskjøvet innover fra kanten av .element:

Ovenfor har vi et element som er 200px bredt og 200px høyt, og vi forskyver formen innen 50px i alle retninger unntatt venstre side. På denne måten vikles teksten over formen, selv om div strekker seg til toppen.

Nettleserstøtte

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
37 62 Nei 79 7,1 *

Mobil / nettbrett

Android Chrome Android Firefox Android iOS Safari
88 85 81 8 *