CSS circle() funktion

Definering og brug

CSS' circle() Funktioner bruges til at definere en cirkel med en radius og en position.

circle() Funktioner bruges normalt med clip-path Egenskaber og shape-outside Brug sammen med egenskaberne.

Eksempel

Eksempel 1

Klip billedet til en cirkel med en radius på 50%:

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

Prøv det selv

Eksempel 2

Klip billedet til en cirkel med en radius på 50% og placer cirkelens center til højre:

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

Prøv det selv

Eksempel 3

Brug clip-path og circle() Opnå 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%);}
}

Prøv det selv

Eksempel 4

kombineret brug circle()ogclip-path og shape-outside:

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

Prøv det selv

CSS syntaks

circle(radius på position)

Tekniske detaljer

Browserunderstøttelse

Tallene i tabellen viser den første browserversion, der fuldt ud understøtter denne funktion.

Relaterede sider

Referencer:CSS clip-path egenskab

Referencer:CSS shape-outside egenskab

Referencer:CSS ellipse() funktion

Referencer:CSS inset() funktion

Referencer:CSS polygon() funktion