English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Руководство по CSS

Правила CSS (RULES)

Полный список свойств CSS

Функция CSS repeating-radial-gradient()

Функция CSS repeating-radial-gradient() создает повторяющийся градиент,辐射自原点, состоящий из <image> . Он ähnelt radial-gradient и использует те же параметры, но повторяет цвета во всех направлениях, чтобы охватить весь контейнер. Результат функции - объект типа <gradient> данных, который является специфическим типом <image>.

CSS функция

Онлайн пример

Повторяющийся линейный градиент:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Основной учебник (oldtoolbag.com)</title>　
<style>
#grad1 {
　　height: 200px;
　　background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
</style>
</head>
<body>
<h3>Повторяющийся радиальный градиент</h3>
<div id="grad1"></div>
<p><strong>Внимание：</strong> Internet Explorer 9 и более ранние версии не поддерживают градиент.</p>
</body>
</html>
Проверьте, посмотрите ‹/›

Определение и использование

Функция repeating-radial-gradient() используется для создания повторяющегося радиального градиента "изображения".

Поддерживаемые версии: CSS3

Совместимость браузеров

Числа в таблице представляют собой первую версию браузера, поддерживающего эту функцию.

"webkit" или "moz" или "o" указанные числа это версия первого поддерживаемого префикса функции.

Функция




repeating-radial-gradient()26.0
10.0 -webkit-		10.016.0
3.6 -moz-		6.1
5.1 -webkit-		12.1
11.1 -o-

Грамматика CSS

background-image: repeating-radial-gradient(shape size at position, start-color, ..., last-color);
ЗначениеОписание
shapeОпределение формы градиента. Может быть:

  • ellipse (по умолчанию): указывает на радиальный градиент эллипса

  • circle: указывает на радиальный градиент круга

sizeКонкретное положение контура края. Может быть одним из следующих значений:

  • farthest-corner (по умолчанию): указывает на длину радиуса градиента от центра до наиболее удаленного угла.

  • closest-side: указывает на длину радиуса градиента от центра до ближайшего края.

  • closest-corner: указывает на длину радиуса градиента от центра до ближайшего угла.

  • farthest-side: напротив closest-side, указывает на длину радиуса градиента от центра до наиболее удаленного края.

positionЦентральная позиция, подобна on и background-position или transform-origin. По умолчанию "center"
start-color, ..., last-colorДля указания начальных и конечных цветов градиента можно использовать значения длины или процента для указания位置的 начального и конечного цветов, но не допускаются отрицательные значения.

CSS учебник: CSS3 градиент

CSS функция

Правило @charset CSSФункции CSS