Funzione ellipse() CSS

Definizione e uso

CSS ellipse() La funzione definisce un'ellisse con due raggio x e y.

ellipse() Le funzioni sono solitamente utilizzate con clip-path Proprietà e shape-outside Proprietà utilizzate insieme.

Esempio

Esempio 1

Taglia l'immagine in un'ellisse con raggio x del 50% e raggio y del 30%:

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

Prova personalmente

Esempio 2

Taglia l'immagine in un'ellisse con raggio x del 50% e raggio y del 30%, e posiziona il centro dell'ellisse a destra:

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

Prova personalmente

Esempio 3

usando clip-path e ellipse() Esegui l'effetto animazione:

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

Prova personalmente

Esempio 4

usati insieme ellipse()、clip-path e shape-outside:

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

Prova personalmente

Sintassi CSS

ellipse(xy-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.

Pagina correlata

Riferimento:Proprietà CSS clip-path

Riferimento:Proprietà CSS shape-outside

Riferimento:Funzione circle() CSS

Riferimento:Funzione CSS inset()

Riferimento:Funzione CSS polygon()