CSS shape-outside egenskap

Definition och användning

shape-outside Egenskapen tillåter dig att definiera en form för inre innehåll. Som standard omges inre innehåll av elementets margin-ram, och med shape-outside，kan du anpassa detta omgärdande.

shape-outside Egenskapen definierar flytande elementets flytande område. Detta flytande område definierar formen som inre innehåll som flytande element omges av.

Exempel

Låt inre innehåll omges av bilden i form av en cirkel:

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

Prova själv

CSS-syntaks

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

Egenskapsvärde

Värde Beskrivning
none Standardvärde. Flytande område påverkas inte. Inre innehåll omges av elementets margin-ram.
margin-box Definierar formen som omgiven av margin-kanterna utanför.
border-box Definierar formen som omgiven av kantlinjerna utanför.
padding-box Definierar formen som omgiven av padding-kanterna utanför.
content-box

Definierar formen som omgiven av innehållsranden.

Varje hörnradie på denna låda är 0 eller det största värdet av border-radius - border-width - padding.
basic-shape Flytande område baseras på formen definierad av inset(), circle(), ellipse() eller polygon() funktionerna.
url(image) Flytande område baseras på den specificerade bildens alpha-kanal, definierad av shape-image-threshold.
initial Sätt detta egenskapsvärde till dess standardvärde. Se initial.
inherit Inherritar detta egenskapsvärde från föräldrelementet. Se inherit.

Tekniska detaljer

Standardvärde: none
Arv: nej
Animering: ja för basic-shape. Läs om animatable
Version: CSS Shapes Module Level 1
JavaScript-syntaks: object.style.shapeOutside="circle(50%)"

Webbläsarstöd

Talen i tabellen representerar den första webbläsarversion som helt stöder egenskapen.

Chrome Edge Firefox Safari Opera
37 79 62 10.1 24