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

CSS function repeating-radial-gradient()

Опис

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

Функція repeating-radial-gradient() працює подібно до функції radial-gradient(), але з можливістю повторюваності градієнта. Вона приймає один або більше аргументів - кольорові зупинки, які визначають точки на радіальній формі, де кольори змінюються. Ви можете вказати кольори в різних форматах, таких як ключові слова, шістнадцяткові значення або RGB значення. Наприклад, repeating-radial-gradient(red, blue) створить повторюваний радіальний градієнт, що переходить від червоного до синього кольору.

Основна відмінність функції repeating-radial-gradient() від radial-gradient() полягає в тому, що градієнт повторюється безперервно, утворюючи покриваючий ефект. Це дозволяє створювати цікаві та естетичні градієнтні елементи, які повторюються на заданому просторі. Наприклад, ви можете використовувати repeating-radial-gradient() для створення фонового градієнта для великих секцій на вашому веб-сайті або для стилізації кнопок, де градієнт буде повторюватись безперервно.

Ось короткий приклад використання функції repeating-radial-gradient() для створення повторюваного градієнта:

div {
  background: repeating-radial-gradient(circle, red, blue);
}

Цей код застосовує повторюваний радіальний градієнт з червоного до синього кольору як фоновий ефект для елементу div.

Порада:

Використовуйте функцію repeating-radial-gradient() для створення повторюваних радіальних градієнтів на фоні елементів.
Порада:

Експериментуйте з різними комбінаціями форми, позиції та кольорових зупинок, щоб отримати бажаний вигляд градієнта.
Порада:

Використовуйте ключові слова circle або ellipse для визначення форми градієнта.
Порада:

Використовуйте ключове слово at разом із <position>, щоб вказати позицію градієнта на елементі.

Синтаксис

repeating-radial-gradient([ circle | ellipse ] [ at <position> ]?, <color-stop-list>);
<circle>

Вказує, що форма градієнта є колом.

<ellipse>

Вказує, що форма градієнта є еліпсом.

<position>

Вказує позицію градієнта на елементі. <position> може бути відсотком, ключовим словом або комбінацією відсотків і ключових слів. Наприклад, at 50% 50%, at top left, at 25% 75%, тощо.

Переглядачі

Переглядач

26

16

7

12.1

12
Переглядач

37

26

16

7

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

Приклади


Цей приклад ілюструє зміну градієнта при взаємодії з елементом.

Цей приклад демонструє два однакових елементи з різними градієнтами.

Спільнота

Зв'язок