CSS/Eigenschaften/shape-outside

Browserunterstützung
caniuse.com

Die Eigenschaft shape-outside definiert ein Element, um das Text herumgeführt wird

Erlaubte Werte

• none: die gefloatete Form beeinflusst den Textfluss nicht
• shape-box:
  • margin-box:
  • border-box:
  • padding-box:
  • content-box:
• basic-shape: ein Wert aus
  • inset(): legt eine rechteckige Form an, die abgerundet werden kann
  • circle(): eine kreisförmige Form
  • ellipse(): eine ovale Form
  • polygon(): legt Form mit beliebig vielen Fixpunkten an
  • path(): legt Pfad mit Punkten(Koordinaten) und Kommandos an
• Bild: URI eines Bildes mit Transparenzen, dessen Form umflossen wird

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

none

anwendbar auf

alle Blockelemente

Vererbung

nein

animierbar

ja, aber nur für Grundformen

Beispiel

.kugel{
  shape-outside: circle(50%);
  shape-margin: 2%;
}

Der Text umfließt ein Bild mit Transparenzen. Ein Wert von 0.5 bedeutet, dass nur Pixel mit einer Deckkraft von 50% und mehr zur Erzeugung der Form herangezogen werden.

Siehe auch

• CSS/Tutorials/Ausrichtung/Shapes
  • shape-outside

Weblinks

• Spezifikation (W3C): shape-outside property
• MDN: shape-outside
• Details: caniuse.com