CSS ellipse() Funktion

Definition und Verwendung

CSS ellipse() Funktion definiert einen Ellipse mit zwei Radien x und y.

ellipse() Funktionen werden normalerweise mit clip-path Eigenschaften und shape-outside Eigenschaften gemeinsam verwenden.

Beispiel

Beispiel 1

Schneiden Sie das Bild in eine Ellipse mit einem x-Radius von 50% und einem y-Radius von 30% aus:

img {
  clip-path: ellipse(50% 30%);
}

Versuchen Sie es selbst

Beispiel 2

Schneiden Sie das Bild in eine Ellipse mit einem x-Radius von 50% und einem y-Radius von 30% aus und positionieren Sie den Mittelpunkt der Ellipse auf der rechten Seite:

img {
  clip-path: ellipse(50% 30% at right);
}

Versuchen Sie es selbst

Beispiel 3

Verwenden Sie clip-path und ellipse() Erzielen Sie Animationseffekte:

#myDIV {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  animation: mymove 5s infinite;
  clip-path: ellipse(80% 50%);
}
@keyframes mymove {
  50% {clip-path: ellipse(30% 10%);}
}

Versuchen Sie es selbst

Beispiel 4

zusammen verwendet ellipse(),clip-path und shape-outside:

img {
  float: left;
  clip-path: ellipse(50% 30%);
  shape-outside: ellipse(55% 35%);
}

Versuchen Sie es selbst

CSS Syntax

ellipse(xy-radius an Position)

Technische Details

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer der ersten Browser dar, die diese Funktion vollständig unterstützen.

Verwandte Seiten

Referenz:CSS ausnehmungs-pfad Eigenschaft

Referenz:CSS shape-outside-Eigenschaft

Referenz:CSS circle() Funktion

Referenz:CSS inset() Funktion

Referenz:CSS polygon() Funktion