CSS ellipse() funksjon

Definisjon og bruk

CSS 's ellipse() Funksjonen definerer en ellipse med to radiuser x og y.

ellipse() Funksjonene brukes vanligvis sammen med clip-path Egenskapene og shape-outside Bruk egenskapene sammen.

Eksempel

Eksempel 1

Klipp bildet til en ellipse med x-radius 50% og y-radius 30%:

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

Prøv selv

Eksempel 2

Klipp bildet til en ellipse med x-radius 50% og y-radius 30%, og plasser ellipsens midtpunkt til høyre:

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

Prøv selv

Eksempel 3

bruk clip-path og ellipse() Oppnå animasjonseffekt:

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

Prøv selv

Eksempel 4

kombinert bruk ellipse()、clip-path og shape-outside:

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

Prøv selv

CSS syntaks

ellipse(xy-radius på posisjon)

Tekniske detaljer

Nettleserstøtte

Tallene i tabellen viser den første nettleserversjonen som fullt ut støtter denne funksjonen.

Relaterede sider

Referencer:CSS clip-path egenskab

Referencer:CSS shape-outside egenskab

Referencer:CSS cirkel() funktion

Referencer:CSS inset() funktion

Referencer:CSS polygon() funktion