Функция repeating-linear-gradient()
Пример
Повторяющийся линейный градиент:
#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
Попробуйте сами »
Определение repeating-linear-gradient()
Функция repeating-linear-gradient()
используется для повторения линейных градиентов.
Версия: | CSS3 |
---|
Поддержка браузера repeating-linear-gradient()
Цифры в таблице указывают первую версию браузера, полностью поддерживающую данную функцию.
Числа, за которыми следуют -webkit-, -moz- или -o-, указывают первую версию, которая работала с префиксом.
Функция | |||||
---|---|---|---|---|---|
repeating-linear-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
CSS Синтаксис repeating-linear-gradient()
background-image: repeating-linear-gradient(angle | to side-or-corner, color-stop1,
color-stop2, ...);
Значение | Описание |
---|---|
angle | Определяет угол направления градиента. От 0 градусов до 360 градусов. По умолчанию 180 градусов. |
side-or-corner | Определяет положение начальной точки линии градиента. Он состоит из двух ключевых слов: первое указывает на горизонтальную сторону, левую или правую, а второе — на вертикальную сторону, верхнюю или нижнюю. Порядок не имеет значения, и каждое ключевое слово является необязательным. |
color-stop1, color-stop2,... | Цветовые остановки — это цвета, между которыми вы хотите сделать плавные переходы. Это значение состоит из значения цвета, за которым следует необязательная позиция остановки (процент от 0% до 100% или длина по оси градиента). |
Ещё примеры repeating-linear-gradient()
Пример
Различные повторяющиеся линейные градиенты:
#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%);
}
Попробуйте сами »
Похожие страницы repeating-linear-gradient()
CSS учебник: CSS Градиенты