De shape-outsideeigenschap bepaalt hoe inhoud rond het begrenzingsvak van een zwevend element wordt gewikkeld. Dit is meestal zo dat tekst opnieuw kan worden geplaatst over een vorm zoals een cirkel, ellips of een veelhoek:
.element ( float: left; shape-outside: circle(50%); width: 200px; height: 200px; )
Het is belangrijk op te merken dat deze eigenschap voorlopig alleen werkt op zwevende elementen, hoewel dit in de toekomst waarschijnlijk zal veranderen. De shape-outsideeigenschap kan ook worden gemanipuleerd met overgangen of animaties.
Waarden
circle(): voor het maken van ronde vormen.ellipse(): voor het maken van elliptische vormen.inset(): voor het maken van rechthoekige vormen.polygon(): voor het maken van elke vorm met 3 of meer hoekpunten.url(): geeft aan welke afbeelding moet worden gebruikt om tekst rond te laten lopen.initial: het vlottergebied wordt niet beïnvloed.inherit: erftshape-outsidewaarde van ouder.
De volgende waarden geven aan welke referentie van het doosmodel moet worden gebruikt om de vorm erin te plaatsen:
margin-boxpadding-boxborder-box
Deze waarden moeten worden toegevoegd aan het einde, bijvoorbeeld: shape-outside: circle(50% at 0 0) padding-box. Standaard wordt de margin-boxreferentie gebruikt.
Ovaal()
.element ( shape-outside: ellipse(150px 300px at 50% 50%); )De ellipse()functie vereist de radii-waarden voor de x-, y-as van de ellips, gevolgd door de coördinaten om het midden van de vorm binnen het begrenzende kader te plaatsen. Het bovenstaande voorbeeld plaatst bijvoorbeeld het midden van de ellips in het verticale en horizontale midden van de .elementdiv:
Hoewel de bovenstaande demo kan suggereren dat we de vorm van de divafbeelding zelf veranderen, zullen we zien dat het selectiekader in feite nog steeds rechthoekig is als we randen en een achtergrondafbeelding toevoegen:
Het is misschien beter om het op deze manier te bekijken: met de shape-outsideeigenschap veranderen we de relatie van andere elementen rond een element, niet de geometrie van het element zelf. Om dit op te lossen, moeten we shape-outsidenaast de clip-path()eigenschap gebruiken, zoals in dit voorbeeld:
cirkel()
.element ( shape-outside: circle(50%); )Deze functie maakt een cirkel en in het codevoorbeeld hierboven wordt een cirkel gemaakt met een straal die de helft van de hoogte en breedte is van .element. De circle()functie kan ook dezelfde syntaxis gebruiken om de vorm erin te plaatsen.
url ()
.element ( shape-outside: url('circle.png.webp'); )In dit geval hebben we twee zwevende afbeeldingen, één aan elke kant van een tekstblok. Aangezien beide afbeeldingen de shape-outsideeigenschap hebben, zal de onderstaande tekst die twee drijvers vermijden.
Het is ook mogelijk om de shape-image-thresholdeigenschap in te stellen die de browser informeert welke pixels, afhankelijk van hun transparantie, de vorm moeten creëren. Bijvoorbeeld:
.element ( shape-outside: url('image.png.webp'); shape-image-threshold: 0.5; )In dit voorbeeld moeten de enige pixels die de vorm zullen creëren 50% transparantie en hoger hebben. Waarden van 0.0(transparant) tot 1.0(ondoorzichtig) zijn geldig.
veelhoek()
.element ( shape-outside: polygon(0 0, 0 200px, 300px 600px); )Deze functie maakt elke vorm met drie of meer hoekpunten, bijvoorbeeld:
Het is belangrijk op te merken dat als deze eigenschap geanimeerd gaat worden, het hetzelfde aantal hoekpunten vereist als je de geanimeerde staat declareert:
.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%); )inzet ()
.element ( shape-outside: inset(100px 100px 100px 100px 10px); /* shape-outside: inset(top right bottom left border-radius); */ )inset()is een functie voor het maken van rechthoekige vormen, er zijn vijf parameters voor nodig, maar de vijfde, want border-radiusis optioneel. De andere argumenten zijn offsets naar binnen vanaf de rand van .element:
Hierboven hebben we een element dat 200 px breed bij 200 px hoog is en we compenseren de vorm binnen 50 px in elke richting behalve de linkerkant. Op deze manier loopt de tekst om boven de vorm, ook al loopt de div naar boven.
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 37 | 62 | Nee | 79 | 7.1 * |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 8 * |