Į shape-outsideturto valdymo, kaip turinys bus užbaigtas aplink plūduriavo elemento ribojančią laukelį. Paprastai tai yra tam, kad tekstas galėtų atsispindėti tokioje formoje kaip apskritimas, elipsė ar daugiakampis:
.element ( float: left; shape-outside: circle(50%); width: 200px; height: 200px; )
Svarbu pažymėti, kad ši ypatybė kol kas veiks tik su plūduriuojančiais elementais, nors ateityje tai greičiausiai pasikeis. shape-outsideTurtas taip pat gali būti manipuliuojama su perėjimais ar animacija.
Vertybės
circle(): apskritimo formoms gaminti.ellipse(): elipsės formos formavimui.inset(): stačiakampio formos formavimui.polygon(): kuriant bet kokią figūrą su 3 ar daugiau viršūnių.url(): nurodo, kuris vaizdas turėtų būti naudojamas tekstui apvynioti.initial: plūdės plotas neturi įtakos.inherit: paveldishape-outsidevertę iš tėvų.
Šios vertės nurodo, kuri langelio modelio nuoroda turėtų būti naudojama figūrai pozicionuoti:
margin-boxpadding-boxborder-box
Šios vertybės turi būti pridėtas prie pabaigos, pavyzdžiui: shape-outside: circle(50% at 0 0) padding-box. Pagal numatytuosius nustatymus margin-boxbus naudojama nuoroda.
elipsė ()
.element ( shape-outside: ellipse(150px 300px at 50% 50%); )ellipse()Funkcija reikalauja, kad spindulys reikšmes x, y ašis elipsės po koordinačių į poziciją, kad formos centras per savo aprėpties langelis. Pavyzdžiui, aukščiau pateiktame pavyzdyje elipsės centras bus pastatytas vertikaliame ir horizontaliame .elementdiv centre :
Nors aukščiau pateiktas demonstracinis variantas gali reikšti, kad keičiame pačios formą div, jei pridėsime kraštines ir fono paveikslėlį, pastebėsime, kad ribojantis langelis iš tikrųjų vis dar yra stačiakampis:
Gali būti geriau galvoti apie tai tokiu būdu: su shape-outsidenuosavybe mes keičiame kitų elementų santykį aplink elementą, o ne paties elemento geometriją. Norėdami išspręsti tai turėsime naudoti shape-outsidekartu su clip-path()nuosavybe, pavyzdžiui, šiame pavyzdyje:
apskritimas ()
.element ( shape-outside: circle(50%); )Ši funkcija sukuria apskritimą, o aukščiau pateiktame kodo pavyzdyje sukurs apskritimą, kurio spindulys yra pusės aukščio ir pločio .element. circle()Funkcija taip pat gali naudoti tą patį sintaksė pastačius formos viduje.
URL ()
.element ( shape-outside: url('circle.png.webp'); )Šiuo atveju turime du plūduriuojančius vaizdus, po vieną iš abiejų teksto bloko pusių. Kadangi abiejų vaizdų shape-outsidesavybė nustatyta, po tekstu žemiau išvengsite šių dviejų plūdurių.
Taip pat galima nustatyti shape-image-thresholdypatybę, kuri informuos naršyklę, kurie pikseliai, atsižvelgiant į jų skaidrumą, turėtų sukurti figūrą. Pavyzdžiui:
.element ( shape-outside: url('image.png.webp'); shape-image-threshold: 0.5; )Šiame pavyzdyje vieninteliai pikseliai, kurie sukurs figūrą, turi būti 50% ir didesni. Vertės nuo 0.0(skaidrios) iki 1.0(nepermatomos) yra teisingos.
poligonas()
.element ( shape-outside: polygon(0 0, 0 200px, 300px 600px); )Ši funkcija sukuria bet kokią figūrą, turinčią tris ar daugiau viršūnių, pavyzdžiui:
Svarbu pažymėti, kad jei ši ypatybė bus animuota, deklaruojant animacinę būseną reikia tiek pat viršūnių:
.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%); )įdėklas ()
.element ( shape-outside: inset(100px 100px 100px 100px 10px); /* shape-outside: inset(top right bottom left border-radius); */ )inset()yra stačiakampių formų sudarymo funkcija, jai reikalingi penki parametrai, bet penktasis border-radius- neprivaloma. Kiti argumentai yra poslinkis į vidų nuo krašto .element:
Viršuje mes turime 200 taškų pločio ir 200 taškų aukščio elementą, o formą kompensuojame iki 50 taškų kiekviena kryptimi, išskyrus kairę pusę. Tokiu būdu tekstas apvynios virš formos, nors div tęsiasi iki viršaus.
Naršyklės palaikymas
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 37 | 62 | Ne | 79 | 7,1 * |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 81 | 8 * |
