Функция CSS ellipse()

Определение и использование

CSS ellipse() Функция определяет эллипс с двумя радиусами x и y.

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

Пример

Пример 1

Обрезает изображение эллипсом с x-радиусом 50% и y-радиусом 30%:

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

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

Пример 2

Обрезает изображение эллипсом с x-радиусом 50% и y-радиусом 30%, и центрирует эллипс по правому краю:

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

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

Пример 3

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

#myDIV {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  animation: mymove 5s infinite;
  clip-path: ellipse(80% 50%);
}
@keyframes mymove {
  50% {clip-path: ellipse(30% 10%);}
}

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

Пример 4

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

img {
  float: left;
  clip-path: ellipse(50% 30%);
  shape-outside: ellipse(55% 35%);
}

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

CSS синтаксис

ellipse(xy-radius на位置е)
Значение Описание
xy-radius

Обязателен. Определяет два радиуса x и y. Это может быть одно из следующих значений:

  • Значение длины
  • Процент
  • 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

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

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

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