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.

автор: Bond

Порада: Використовуйте функцію repeating-radial-gradient() для створення повторюваних радіальних градієнтів на фоні елементів.
автор: Bond
Порада: Експериментуйте з різними комбінаціями форми, позиції та кольорових зупинок, щоб отримати бажаний вигляд градієнта.
автор: Bond
Порада: Використовуйте ключові слова circle або ellipse для визначення форми градієнта.
автор: Bond
Порада: Використовуйте ключове слово at разом із <position>, щоб вказати позицію градієнта на елементі.
автор: Bond

Синтаксис

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

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

<circle>

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

автор: Bond

<ellipse>

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

автор: Bond

<position>

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

автор: Bond