shape-outsideOminaisuus määrittää, miten sisältö kietoa kellutettuun elementin muokkausalueen-ruutuun. Tyypillisesti näin on, että teksti voi heijastua muodon, kuten ympyrän, ellipsin tai monikulmion, yli:
.element ( float: left; shape-outside: circle(50%); width: 200px; height: 200px; )
On tärkeää huomata, että tämä ominaisuus toimii toistaiseksi vain kelluvilla elementeillä, vaikka tämä todennäköisesti muuttuu tulevaisuudessa. shape-outsideOmaisuus voidaan myös manipuloida siirtymiä tai animaatioita.
Arvot
circle(): pyöreiden muotojen tekemiseen.ellipse(): elliptisten muotojen tekemiseen.inset(): suorakulmaisten muotojen tekemiseen.polygon(): minkä tahansa muodon luomiseen, jossa on vähintään 3 kärkipistettä.url(): määrittää, mitä kuvaa tulisi käyttää tekstin käärimiseen.initial: uimurialue ei muutu.inherit: periishape-outsidearvon vanhemmalta.
Seuraavat arvot osoittavat, mitä laatikkomallin viitteitä tulisi käyttää muodon sijoittamiseen:
margin-boxpadding-boxborder-box
Nämä arvot tulisi perään, esimerkiksi: shape-outside: circle(50% at 0 0) padding-box. Oletusarvoisesti margin-boxviitettä käytetään.
ellipsi()
.element ( shape-outside: ellipse(150px 300px at 50% 50%); )ellipse()Toiminto edellyttää säteiden arvot x, y-akseli ellipsin, jota seuraa koordinaattien sijoittamiseksi keskelle muoto sen muokkausalueen. Esimerkiksi yllä oleva esimerkki sijoittaa ellipsin keskikohdan .elementdiv: n pysty- ja vaakakeskipisteeseen:
Vaikka yllä oleva demo saattaa ehdottaa, että muutamme divitsensä muotoa, lisäämällä reunat ja taustakuvan huomaamme, että rajoittava ruutu on itse asiassa edelleen suorakulmainen:
Saattaa olla parempi ajatella sitä tällä tavalla: shape-outsideominaisuudella muutamme muiden elementtien suhdetta elementin ympärille, emme itse elementin geometriaa. Korjaa se, jota meidän on käytettävä kiinteistön shape-outsiderinnalla clip-path(), kuten tässä esimerkissä:
ympyrä()
.element ( shape-outside: circle(50%); )Tämä toiminto luo ympyrän, ja yllä olevassa koodiesimerkissä se luo ympyrän, jonka säde on puolet korkeudesta ja leveydestä .element. circle()Toiminto voi myös käyttää samaa syntaksia sijoittamiseksi muodon sisällä.
URL ()
.element ( shape-outside: url('circle.png.webp'); )Tässä tapauksessa meillä on kaksi kelluvaa kuvaa, yksi tekstilohkon kummallakin puolella. Koska molemmilla kuvilla on asetettu shape-outsideominaisuus, alla oleva teksti välttää nämä kaksi kelluketta.
On myös mahdollista asettaa shape-image-thresholdominaisuus, joka ilmoittaa selaimelle, minkä pikselien niiden läpinäkyvyydestä riippuen tulisi luoda muoto. Esimerkiksi:
.element ( shape-outside: url('image.png.webp'); shape-image-threshold: 0.5; )Tässä esimerkissä ainoan muodon luovan pikselin läpinäkyvyyden on oltava vähintään 50%. Arvot välillä 0.0(läpinäkyvä) - 1.0(läpinäkymätön) ovat kelvollisia.
monikulmio()
.element ( shape-outside: polygon(0 0, 0 200px, 300px 600px); )Tämä toiminto luo minkä tahansa muodon, jossa on vähintään kolme kärkeä, esimerkiksi:
On tärkeää huomata, että jos tämä ominaisuus aiotaan animoida, se vaatii saman määrän pisteitä, kun ilmoitat animoidun tilan:
.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%); )sisäkkäin ()
.element ( shape-outside: inset(100px 100px 100px 100px 10px); /* shape-outside: inset(top right bottom left border-radius); */ )inset()on toiminto suorakulmaisten muotojen tekemiseen, se vaatii viisi parametria, mutta viides, sillä border-radiuson valinnainen. Muut argumentit ovat siirtymiä sisäänpäin reunasta .element:
Yläpuolella on elementti, jonka leveys on 200 kuvapistettä ja korkeus 200 kuvapistettä, ja kompensoimme muodon 50 kuvapisteen jokaiseen suuntaan paitsi vasemmalle puolelle. Näin teksti kiertyy muodon yläpuolelle, vaikka div ulottuu yläosaan.
Selaimen tuki
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 37 | 62 | Ei | 79 | 7,1 * |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 8 * |