CSS circle() funktion

Definition och användning

CSS: circle() Funktioner används för att definiera en cirkel med en radie och en position.

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

Exempel

Exempel 1

Klipp ut bilden till en cirkel med en radie av 50%:

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

Prova själv

Exempel 2

Klipp ut bilden till en cirkel med en radie av 50% och placera mitten till höger:

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

Prova själv

Exempel 3

Använd clip-path och circle() Uppnå animationseffekt:

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

Prova själv

Exempel 4

kombinerat användande circle(),clip-path och shape-outside:

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

Prova själv

CSS syntax

circle(radius vid position)

Tekniska detaljer

Webbläsarstöd

Tal i tabellen representerar den första webbläsareversion som helt stöder denna funktion.

Relaterade sidor

Referens:CSS clip-path egenskap

Referens:CSS shape-outside egenskap

Referens:CSS ellipse() funktion

Referens:CSS inset() funktion

Referens:CSS polygon() funktion