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

Предыдущая страница Функция CSS repeating-conic-gradient()
Следующая страница Функция CSS repeating-radial-gradient()
Вернуться на один уровень вверх Референсное руководство по функциям CSS

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

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

Пример:

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

linear-gradient(red, yellow, blue);	repeating-linear-gradient(red, yellow 10%, blue 20%);

Пример

Пример 1

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

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Попробуйте сами

Пример 2

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

#grad1 {
  background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%);
}
#grad2 {
  background-image: repeating-linear-gradient(190deg, red, blue 7%, green 10%);
}
#grad3 {
  background-image: repeating-linear-gradient(90deg, red, blue 7%, green 10%);
}

Попробуйте сами

Грамматика CSS

repeating-linear-gradient(angle to side-or-corner, color-stop1, color-stop2, ...);

Значение	Описание
angle	Определяет направление градиента по углу. От 0deg до 360deg. Значением по умолчанию является 180deg.
side-or-corner	Определяет положение начала градиента. Он состоит из двух ключевых слов: первое представляет горизонтальное направление (left или right), второе - вертикальное (top или bottom). Порядок不重要, и каждый ключ является необязательным.
color-stop1, color-stop2,...	Цветовые endpoints - это цвета, между которыми вы хотите отображать плавный переход. Эта величина состоит из значений цветов и одного или двух необязательных положений остановки (процент от 0% до 100% или длина по градиентной оси)

Значение

Описание

angle

Определяет направление градиента по углу. От 0deg до 360deg. Значением по умолчанию является 180deg.

side-or-corner

Определяет положение начала градиента.

Он состоит из двух ключевых слов: первое представляет горизонтальное направление (left или right), второе - вертикальное (top или bottom).

Порядок不重要, и каждый ключ является необязательным.

color-stop1, color-stop2,...

Цветовые endpoints - это цвета, между которыми вы хотите отображать плавный переход.

Эта величина состоит из значений цветов и одного или двух необязательных положений остановки (процент от 0% до 100% или длина по градиентной оси)