Funkcja CSS circle()

Definicja i użycie

CSS circle() Funkcje używane do definiowania kuli o promieniu i pozycji.

circle() Funkcje zazwyczaj używane z clip-path Atrybuty i shape-outside Atrybuty używać razem.

Przykład

Przykład 1

Przytnij obraz do kuli o promieniu 50%:

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

Spróbuj sam

Przykład 2

Przytnij obraz do kuli o promieniu 50% i umieść jej środek na prawej stronie:

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

Spróbuj sam

Przykład 3

używając clip-path i circle() Zaimplementuj efekt animacji:

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

Spróbuj sam

Przykład 4

łącznie używać circle(),clip-path i shape-outside:

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

Spróbuj sam

Gramatyka CSS

circle(radius w pozycji)

Szczegóły techniczne

Obsługa przeglądarek

Liczby w tabeli oznaczają pierwszą wersję przeglądarki, która w pełni obsługuje tę funkcję.

Strony związane

Odniesienie:CSS clip-path atrybut

Odniesienie:Atrybut shape-outside w CSS

Odniesienie:Funkcja CSS ellipse()

Odniesienie:Funkcja inset() w CSS

Odniesienie:Funkcja polygon() w CSS