CSS shape-outside egenskab

Definizione og uso

shape-outside Egenskaben giver dig mulighed for at definere en pakkeform for indrykket indhold. Som standard pakkes indrykket indhold omkring sin marginboks, og ved brug af shape-outside，kan du tilpasse denne indpakning.

shape-outside Egenskaben definerer flydende elementets flydende område. Dette flydende område definerer formen, som indrykket indhold flydende element omgives af.

Eksempel

Lad indrykket indhold omgives af billedet i en cirkel:

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

Prøv det selv

CSS syntaks

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

Egenskabsværdi

Værdi Beskrivelse
ingen Standardværdi. Flydende område påvirkes ikke. Indrykket indhold omgives af elementets marginboks.
margin-box Definerer formen omgivet af marginens yderkant.
border-box Definerer formen omgivet af kantens yderkant.
padding-box Definerer formen omgivet af indrykningens yderkant.
content-box

Definerer formen omgivet af indholdets kanter.

Hver hjørne af dette boks' radius er 0 eller det største af border-radius - border-width - padding.
basic-shape Flydende område baseret på formen defineret af funktionerne inset(), circle(), ellipse() eller polygon().
url(image) Flydende område baseret på det specificerede billedets alpha-kanal, defineret af shape-image-threshold.
initial Sæt denne egenskab til dens standardværdi. Se initial.
inherit Arv denne egenskab fra forældrelementet. Se inherit.

Tekniske detaljer

Standardværdi: ingen
Arv: Nej
Animation: ja for basic-shape. Læs om animatable
Version: CSS Shapes Module Level 1
JavaScript syntaks: object.style.shapeOutside="circle(50%)"

Browserunderstøttelse

Tabelens tal angiver den første browserversion, der fuldt ud understøtter egenskaben.

Chrome Edge Firefox Safari Opera
37 79 62 10.1 24