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(). Задаємо розміри контейнера, встановлюємо фоновий колір та еліптичну форму.
- Порада
-
Переконайтеся, що значення
автор: Bondsemi-major-axisтаsemi-minor-axisвідповідають бажаному розміру та пропорціям еліпса. - Порада
-
Використовуйте функцію
автор: Bondellipse()разом з властивістюshape-outsideдля визначення форми текстових блоків навколо елементів з формою еліпса. - Нотатка
-
Зверніть увагу, що функція
автор: Bondellipse()не підтримується всіма браузерами. Перед використанням переконайтеся, що ваша цільова аудиторія підтримує цю функцію або розгляньте альтернативні способи досягнення бажаного ефекту.
Синтаксис
ellipse(<semi-major-axis> <semi-minor-axis>)Функція ellipse може отримувати 2 значень:
-
<semi-major-axis> -
Вираз або значення, яке представляє напіввелику ось еліпса. Може бути вказане в одиницях виміру (наприклад, пікселі, відсотки) або без одиниць (прості числа).
автор: Bond -
<semi-minor-axis> -
Вираз або значення, яке представляє напівменшу ось еліпса. Може бути вказане в одиницях виміру (наприклад, пікселі, відсотки) або без одиниць (прості числа).
автор: Bond
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 37 | 54 | 10.1 | 24 | 79 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 37 | 37 | 54 | 10.3 |
Приклади
+ запропонувати свій приклад у пісочниці
Цей приклад демонструє використання CSS-функції circle() для створення еліпсу, який змінює свій вигляд при наведенні курсору.
У цьому прикладі ми використовуємо CSS-функцію ellipse() для створення вирізаного шматка тексту, що надає йому цікавий вигляд.
Коментарі
Коментарів ще немає — будьте першим!