CSS ellipse() functie

definitie en gebruik

CSS van ellipse() functie definieert een ellipse met twee stralen x en y.

ellipse() functies worden meestal samen gebruikt met clip-path eigenschappen en shape-outside eigenschappen samen gebruiken.

voorbeeld

voorbeeld 1

snijd het beeld af tot een ellipse met een x-straal van 50% en een y-straal van 30%:

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

probeer het zelf

voorbeeld 2

snijd het beeld af tot een ellipse met een x-straal van 50% en een y-straal van 30%, en positioneer het centrum van de ellipse aan de rechterkant:

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

probeer het zelf

voorbeeld 3

gebruik clip-path en ellipse() realiseer animatie-effecten:

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

probeer het zelf

voorbeeld 4

gebruik samen ellipse()enclip-path en shape-outside:

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

probeer het zelf

CSS syntaxis

ellipse(xy-radius op positie)

technische details

browserondersteuning

De cijfers in de tabel geven de browserversie aan die de functie volledig ondersteunt.

gerelateerde pagina's

Referentie:CSS clip-pad eigenschap

Referentie:CSS shape-outside eigenschap

Referentie:CSS circle() functie

Referentie:CSS inset() functie

Referentie:CSS polygon() functie