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().

автор: Bond

Порада: Використовуйте функцію circle() для створення елементів з круглою формою, таких як кнопки, області виділення, маркери тощо.
автор: Bond
Порада: Комбінуйте функцію circle() з іншими CSS властивостями, наприклад background-color, border, box-shadow тощо, щоб створювати більш складені ефекти та стилі.
автор: Bond
Порада: При використанні аргументів at position та color можна досягти додаткових ефектів та налаштувань для кругових елементів.
автор: Bond

Синтаксис

circle(<shape-size>? [at <position>] [color <color>]?)

Функція circle може отримувати 3 значень:

<shape-size>

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

автор: Bond

at <position>

Вказується позиція кругової форми. Можливі значення: center, top, right, bottom, left або комбінації цих ключових слів.

автор: Bond

color <color>

Вказується колір кругової форми. Можливі значення: іменовані кольори, шістнадцяткові значення (#RRGGBB або #RGB) або функції кольору, наприклад rgb(), rgba(), hsl() або hsla().

автор: Bond

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
	37	54	10.1	24	79

Підтримка: мобільні переглядачі
Переглядач
	37	37	54	10.3

Приклади

+ запропонувати свій приклад у пісочниці

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

автор: Bond

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

автор: Bond

Коментарі

Коментарів ще немає — будьте першим!