css.in.ua
Підтримати

CSS function ellipse()

Опис

Функція ellipse() в CSS є інструментом для створення еліптичних форм елементів. Вона дозволяє з легкістю створювати елементи з заданими розмірами напіввеликої та напівменшої осей. Ця функція надає гнучкість та контроль над формою елементів, дозволяючи створювати округлі або овальні контейнери, фони або межі.

При використанні функції ellipse() необхідно коректно встановити значення для напіввеликої та напівменшої осей. Це допомагає досягти бажаної форми еліпса з відповідними пропорціями. Наприклад, вказавши значення ellipse(200px 100px), ви створите еліпс з напіввеликою осю 200 пікселів та напівменшою осю 100 пікселів.

Приклад використання:

.ellipse-container {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  clip-path: ellipse(50% 50%);
}

У даному прикладі ми створюємо контейнер з еліптичною формою за допомогою функції ellipse(). Задаємо розміри контейнера, встановлюємо фоновий колір та еліптичну форму.

Порада:

Переконайтеся, що значення semi-major-axis та semi-minor-axis відповідають бажаному розміру та пропорціям еліпса.
Порада:

Використовуйте функцію ellipse() разом з властивістю shape-outside для визначення форми текстових блоків навколо елементів з формою еліпса.
Нотатка:

Зверніть увагу, що функція ellipse() не підтримується всіма браузерами. Перед використанням переконайтеся, що ваша цільова аудиторія підтримує цю функцію або розгляньте альтернативні способи досягнення бажаного ефекту.

Синтаксис

ellipse(<semi-major-axis> <semi-minor-axis>)
<semi-minor-axis>

Вираз або значення, яке представляє напівменшу ось еліпса. Може бути вказане в одиницях виміру (наприклад, пікселі, відсотки) або без одиниць (прості числа).

<semi-major-axis>

Вираз або значення, яке представляє напіввелику ось еліпса. Може бути вказане в одиницях виміру (наприклад, пікселі, відсотки) або без одиниць (прості числа).

Переглядачі

Переглядач

37

54

10.1

24

79
Переглядач

37

37

54

10.3

Мобільних переглядачів ще не додано.

Приклади


Цей приклад демонструє використання CSS-функції circle() для створення еліпсу, який змінює свій вигляд при наведенні курсору.

У цьому прикладі ми використовуємо CSS-функцію ellipse() для створення вирізаного шматка тексту, що надає йому цікавий вигляд.

Документи

Зв'язок