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

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

Порада:

Використовуйте функцію circle() для створення елементів з круглою формою, таких як кнопки, області виділення, маркери тощо.
Порада:

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

При використанні аргументів at position та color можна досягти додаткових ефектів та налаштувань для кругових елементів.

Синтаксис

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

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

at <position>

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

color <color>

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

Переглядачі

Переглядач

37

54

10.1

24

79
Переглядач

37

37

54

10.3

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

Приклади


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

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

Документи

Зв'язок