CSS shape-outside eigenschap

definitie en gebruik

shape-outside De eigenschap stelt u in staat om een omsluitvorm voor inline-inhoud te definiëren. Standaard wordt inline-inhoud om de marges ervan gepakt, maar met shape-outside，waarbij u deze manier van inpakken kunt aanpassen.

shape-outside De eigenschap definieert het float-gebied van het float-element. Dit float-gebied definieert de vorm waarin de inline-content-float-elementen worden omgeven.

Voorbeeld

Laat inline-inhoud om het beeld in een cirkel omringen:

img {
  float: links;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}

Probeer het zelf uit

CSS syntaxis

shape-outside: none|margin-box|border-box|padding-box|content-box|basic-shape|url(beeld)|initial|inherit;

Attribuutwaarde

Waarde Beschrijving
geen Standaardwaarde. Het float-gebied wordt niet beïnvloed. Inline-inhoud wordt om de marges van het element gepakt.
margin-box Definieert de vorm die wordt omgeven door de buitendiamter.
border-box Definieert de vorm die wordt omgeven door de rand.
padding-box Definieert de vorm die wordt omgeven door de binnenrand.
content-box

Definieert de vorm die wordt omgeven door de randen van de inhoud.

De hoekradius van dit vak is 0 of de grotere waarde van border-radius - border-width - padding.
basic-shape Het float-gebied is gebaseerd op de vorm van de functies inset(), circle(), ellipse() of polygon().
url(beeld) De float-gebied is gebaseerd op de alpha-kanaal van het gespecificeerde beeld, gedefinieerd door shape-image-threshold.
initial Stel dit attribuut in op zijn standaardwaarde. Raadpleeg initial.
inherit Dit attribuut erfst van de ouderweergave. Raadpleeg inherit.

Technische details

Standaardwaarde: geen
Inheritantie: nee
Animatie maken: ja voor basic-shape. Lees over animatable
Versie: CSS Shapes Module Level 1
JavaScript syntaxis: object.style.shapeOutside="circle(50%)"

Browserondersteuning

Tafelgetallen geven de browserversie aan die de eigenschap volledig ondersteunt.

Chrome Edge Firefox Safari Opera
37 79 62 10.1 24