CSS ellipse() funktion

Definition och användning

CSS: ellipse() Funktionen definierar en ellipse med två radii x och y.

ellipse() Funktioner används ofta med clip-path Egenskaper och shape-outside Använda egenskaper tillsammans.

Exempel

Exempel 1

Klipp ut bilden till en ellipse med x-radien 50% och y-radien 30%:

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

Prova själv

Exempel 2

Klipp ut bilden till en ellipse med x-radien 50% och y-radien 30%, och placera ellipsens center till höger:

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

Prova själv

Exempel 3

Använd clip-path och ellipse() Genomför animationseffekten:

#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 själv

Exempel 4

Använd tillsammans ellipse()、clip-path och shape-outside:

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

Prova själv

CSS Syntax

ellipse(xy-radius vid position)

Tekniska detaljer

Webbläsarstöd

Talen i tabellen representerar den första webbläsarens version som helt stöder denna funktion.

Relaterade sidor

Referens:CSS clip-path egenskap

Referens:CSS shape-outside egenskap

Referens:CSS circle() funktion

Referens:CSS inset() funktion

Referens:CSS polygon() funktion