shape-outsideVara kontrolli, kuidas sisu ümbritsev paisati elemendi ümbritseva kasti. Tavaliselt on see selleks, et tekst saaks ümber kujundada kuju, näiteks ringi, ellipsi või hulknurga:
.element ( float: left; shape-outside: circle(50%); width: 200px; height: 200px; )
Oluline on märkida, et see omadus töötab praegu ainult ujuvate elementide puhul, ehkki see tõenäoliselt tulevikus muutub. shape-outsideVara saab manipuleerida üleminekud või animatsioone.
Väärtused
circle(): ringikujuliste kujundite valmistamiseks.ellipse(): elliptiliste kujundite valmistamiseks.inset(): ristkülikukujuliste kujundite valmistamiseks.polygon(): mis tahes kuju loomiseks 3 või enama tipuga.url(): määrab, millist pilti tuleks teksti ümber mähkida.initial: ujukiala ei muutu.inherit: päribshape-outsideväärtuse vanemalt.
Järgmised väärtused määratlevad kasti mudeli viiteid, mida tuleks kuju paigutamiseks kasutada:
margin-boxpadding-boxborder-box
Need väärtused peaksid olema lisatud lõppu, näiteks: shape-outside: circle(50% at 0 0) padding-box. Vaikimisi kasutatakse margin-boxviidet.
ellips ()
.element ( shape-outside: ellipse(150px 300px at 50% 50%); )ellipse()Funktsioon nõuab vahede väärtused x, y ellipsi järgneb koordinaate kuni positsioonini keskel kuju tema piirdekasti. Näiteks asetab ülaltoodud näide ellipsi keskpunkti divi vertikaalsesse ja horisontaalsesse keskmesse .element:
Kuigi ülaltoodud demo võib viidata sellele, et me muudame diviseenda kuju, lisame piirid ja taustpildi lisades, et piirikast on tegelikult endiselt ristkülikukujuline:
Võib-olla oleks parem sellele mõelda nii: shape-outsideomadusega muudame elemendi suhet teiste elementide ümber, mitte elemendi enda geomeetriat. Selle parandamiseks peame kasutama atribuudi shape-outsidekõrval clip-path(), näiteks järgmises näites.
ring ()
.element ( shape-outside: circle(50%); )See funktsioon loob ringi ja ülaltoodud koodinäites loob selle ringi, mille raadius on pool kõrgust ja laiust .element. circle()Funktsiooni saab kasutada ka sama süntaksi positsioneerimiseks kujuga.
URL ()
.element ( shape-outside: url('circle.png.webp'); )Sel juhul on meil kaks hõljuvat pilti, üks tekstiploki mõlemal küljel. Kuna mõlemal pildil on shape-outsideomadus määratud, väldib allolev tekst neid kahte ujukit.
Samuti on võimalik määrata shape-image-thresholdomadus, mis teavitab brauserit sellest, millised pikslid peaksid kuju looma, sõltuvalt nende läbipaistvusest. Näiteks:
.element ( shape-outside: url('image.png.webp'); shape-image-threshold: 0.5; )Selles näites peavad ainsad kuju loovad pikslid olema vähemalt 50% -lise läbipaistvusega. Väärtused vahemikust 0.0(läbipaistev) kuni 1.0(läbipaistmatu) kehtivad.
hulknurk ()
.element ( shape-outside: polygon(0 0, 0 200px, 300px 600px); )See funktsioon loob mis tahes kuju, millel on kolm või enam tippu, näiteks:
Oluline on märkida, et kui see omadus animeeritakse, nõuab see animeeritud oleku deklareerimisel sama arvu tippe:
.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%); )sisestatud ()
.element ( shape-outside: inset(100px 100px 100px 100px 10px); /* shape-outside: inset(top right bottom left border-radius); */ )inset()on ristkülikukujuliste kujundite funktsioon, selleks on vaja viit parameetrit, kuid viies border-radiuson valikuline. Teised argumendid on nihked sissepoole servast .element:
Ülal on element, mille laius on 200 pikslit ja pikkus 200 pikslit, ning tasaarvestame kuju kuni 50 pikslit igas suunas, välja arvatud vasak külg. Nii mähkub tekst kuju kohal, kuigi div ulatub üles.
Brauseri tugi
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 37 | 62 | Ei | 79 | 7,1 * |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 81 | 8 * |