CSS function circle
Опис
Функція circle() в CSS є засобом для створення елементів у формі круга з використанням clip-path. Вона дозволяє легко створювати округлі елементи зі зворотною вирізаною зовнішньою формою, що додає привабливості та естетичного вигляду. Цей підхід особливо корисний для створення круглих кнопок, фігур з нестандартною формою та багато чого іншого.
Щоб використовувати функцію circle() з clip-path, ви можете визначити круглу форму обрізання для елемента. Ось приклад:
.circle-element {
width: 100px;
height: 100px;
background-color: #4CAF50;
clip-path: circle(50%);
}
У цьому прикладі ми створюємо елемент з круглою формою обрізання використовуючи функцію circle() та clip-path. Задаємо розміри елемента, фоновий колір та встановлюємо круглу форму обрізання, вказавши радіус через функцію circle().
- Порада
-
Використовуйте функцію
автор: Bondcircle()для створення елементів з круглою формою, таких як кнопки, області виділення, маркери тощо. - Порада
-
Комбінуйте функцію
автор: Bondcircle()з іншими CSS властивостями, наприкладbackground-color,border,box-shadowтощо, щоб створювати більш складені ефекти та стилі. - Порада
-
При використанні аргументів
автор: Bondat positionтаcolorможна досягти додаткових ефектів та налаштувань для кругових елементів.
Синтаксис
circle(<shape-size>? [at <position>] [color <color>]?)Функція circle може отримувати 3 значень:
-
<shape-size> -
Вказується розмір кругової форми. Можливі значення в пікселях (
автор: Bondpx), відсотках (%) або інших одиницях виміру. -
at <position> -
Вказується позиція кругової форми. Можливі значення:
автор: Bondcenter,top,right,bottom,left або комбінації цих ключових слів. -
color <color> -
Вказується колір кругової форми. Можливі значення: іменовані кольори, шістнадцяткові значення (
автор: Bond#RRGGBBабо#RGB) або функції кольору, наприкладrgb(),rgba(),hsl()абоhsla().
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 37 | 54 | 10.1 | 24 | 79 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 37 | 37 | 54 | 10.3 |
Приклади
+ запропонувати свій приклад у пісочниці
Цей приклад демонструє використання CSS-функції circle() для створення круглого блоку, який змінює свій вигляд при наведенні курсору.
У цьому прикладі ми використовуємо CSS-функцію circle() для створення вирізаного шматка тексту, що надає йому цікавий вигляд.
Коментарі
Коментарів ще немає — будьте першим!