Рекомендуемый курс:

Функция circle() в CSS

Определение и использование CSS circle() Функция используется для определения круга с радиусом и положением.

circle() Функции обычно используются с clip-path Свойства и shape-outside Свойства используются вместе.

Пример

Пример 1

Обрезать изображение до круга с радиусом 50%:

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

Попробуйте сами

Пример 2

Обрезать изображение до круга с радиусом 50% и разместить центр круга справа:

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

Попробуйте сами

Пример 3

Использование clip-path и circle() Реализация анимационного эффекта:

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

Попробуйте сами

Пример 4

совместное использование circle(),clip-path и shape-outside:

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

Попробуйте сами

CSS синтаксис

circle(radius в положении)
Значение Описание
radius

Обязателен. Указание радиуса круга. Это может быть одним из следующих значений:

  • Значение длины
  • Процент
  • closest-side: использование расстояния от центра формы до ближайшего края рамки
  • farthest-side: использование расстояния от центра формы до наиболее удаленного края рамки
в положении

Опционально. Указание центрального положения круга.

Это может быть значением длины, процентным значением или одним из значений left, right, top или bottom.

Значением по умолчанию является center.

Технические детали

Версия: CSS Shape Module Level 1

Поддержка браузерами

Числа в таблице указывают на версию первого браузера, который полностью поддерживает эту функцию.

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

Соответствующие страницы

См. также:Свойство clip-path CSS

См. также:Свойство shape-outside в CSS

См. также:Функция ellipse() в CSS

См. также:Функция inset() в CSS

См. также:Функция polygon() в CSS