CSS circle() Funktion

Definition und Verwendung

CSS circle() Funktionen verwendet, um eine Kugel mit Radius und Position zu definieren.

circle() Funktionen werden normalerweise mit clip-path Eigenschaften und shape-outside Eigenschaften zusammen verwenden.

Beispiel

Beispiel 1

Schneiden Sie das Bild in einen Kreis mit einem Radius von 50%:

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

Versuchen Sie es selbst

Beispiel 2

Schneiden Sie das Bild in einen Kreis mit einem Radius von 50% und positionieren Sie den Mittelpunkt auf der rechten Seite:

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

Versuchen Sie es selbst

Beispiel 3

Verwenden Sie clip-path und circle() Erreichen Sie den Animationseffekt:

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

Versuchen Sie es selbst

Beispiel 4

kombiniert verwenden circle(),clip-path und shape-outside:

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

Versuchen Sie es selbst

CSS Syntax

circle(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 clip-path Eigenschaft

Referenz:CSS shape-outside-Eigenschaft

Referenz:CSS ellipse() Funktion

Referenz:CSS inset() Funktion

Referenz:CSS polygon() Funktion