CSS circle() functie

definitie en gebruik

CSS circle() functies worden gebruikt om een cirkel met een straal en positie te definiëren.

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

voorbeeld

voorbeeld 1

knip het beeld af tot een cirkel met een straal van 50%:

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

probeer het zelf

voorbeeld 2

knip het beeld af tot een cirkel met een straal van 50% en plaats de cirkel in de rechterhoek:

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

probeer het zelf

voorbeeld 3

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

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

probeer het zelf

voorbeeld 4

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

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

probeer het zelf

CSS syntaxis

circle(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 ellipse() functie

Referentie:CSS inset() functie

Referentie:CSS polygon() functie