Funzione circle() CSS

Definizione e uso

CSS circle() La funzione CSS utilizzata per definire un cerchio con un raggio e una posizione.

circle() Le funzioni sono spesso usate con clip-path Proprietà e shape-outside Proprietà usate insieme.

Esempio

Esempio 1

Ridurre l'immagine a un cerchio di raggio del 50%:

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

Prova personalmente

Esempio 2

Ridurre l'immagine a un cerchio di raggio del 50% e posizionare il centro a destra:

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

Prova personalmente

Esempio 3

Usare clip-path e circle() Realizzare l'effetto animazione:

#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%);}
}

Prova personalmente

Esempio 4

usati insieme circle()eclip-path e shape-outside:

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

Prova personalmente

Sintassi CSS

circle(radius alla posizione)

Dettagli tecnici

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente la funzione per la prima volta.

Pagine correlate

Riferimento:Proprietà CSS clip-path

Riferimento:Proprietà CSS shape-outside

Riferimento:Funzione ellipse() CSS

Riferimento:Funzione CSS inset()

Riferimento:Funzione CSS polygon()