ellipse()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die ellipse() CSS-Funktion ist eines der <basic-shape> Datentypen.

Probieren Sie es aus

Syntax

css
shape-outside: ellipse(40% 50% at left);
shape-outside: ellipse(closest-side farthest-side at 30%);

Eine Ellipse ist im Wesentlichen ein eingedrückter Kreis, und daher funktioniert ellipse() ganz ähnlich wie circle(), außer dass wir zwei Radien, x und y, angeben müssen.

Werte

<shape-radius>

Zwei Radien, x und y in dieser Reihenfolge. Diese können eine <length>, ein <percentage> oder die Werte closest-side und farthest-side sein.

closest-side

Verwendet die Länge von der Mitte der Form zur nächstgelegenen Seite des Referenzrahmens. Für Ellipsen ist dies die nächstgelegene Seite in der Radiusdimension.

farthest-side

Verwendet die Länge von der Mitte der Form zur am weitesten entfernten Seite des Referenzrahmens. Für Ellipsen ist dies die am weitesten entfernte Seite in der Radiusdimension.

<position>

Verschiebt den Mittelpunkt der Ellipse. Kann eine <length>, ein <percentage>, oder ein Wert wie left sein. Der <position>-Wert ist standardmäßig die Mitte, wenn er weggelassen wird.

Formale Syntax

<ellipse()> = 
  ellipse( <radial-size>? [ at <position> ]? )  

<radial-size> = 
  <radial-extent>               |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<radial-extent> = 
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side    

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Einfaches ellipse()-Beispiel

Dieses Beispiel zeigt eine Ellipse mit einem x-Radius von 40%, einem y-Radius von 50% und der Position left. Das bedeutet, dass der Mittelpunkt der Ellipse am linken Rand des Rahmens liegt und uns eine halbe Ellipsenform gibt, um unseren Text darum herumzuwickeln. Sie können diese Werte ändern, um zu sehen, wie sich die Ellipse verändert.

Verwendung von closest-side / farthest-side Werten

Die Schlüsselwortwerte closest-side und farthest-side sind nützlich, um schnell eine Ellipse basierend auf der Größe des Fließelement-Referenzrahmens zu erstellen.

Spezifikationen

Specification
CSS Shapes Module Level 1
# funcdef-basic-shape-ellipse

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch