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
• url(): Bild 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. Zusätzlich wird ein Rand definiert, damit Text und Grafik nicht aneinanderstoßen.

Siehe auch

• Textumfluss mit Shapes
  Shapes ermöglichen interessante Layouts mit fließendem Text um grafische Objekte herum.
   
• 

  Beschneidungen mit clip-path

  sichtbare Bereiche von Elementen flexibel steuern

   

Weblinks

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