Função CSS repeating-linear-gradient()

Definição e uso

CSS repeating-linear-gradient() A função é usada para gradiente linear repetido.

Exemplo:

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

Exemplo

Exemplo 1

Um gradiente linear repetitivo:

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

Experimente você mesmo

Exemplo 2

Diferentes gradientes lineares repetitivos:

#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%);
}

Experimente você mesmo

Sintaxe CSS

repeating-linear-gradient(angle to side-or-corner, color-stop1, color-stop2, ...);
Valor Descrição
angle Define o ângulo de direção do gradiente. De 0deg a 360deg. O valor padrão é 180deg.
side-or-corner

Define a posição de partida da linha de gradiente.

Ele é composto por dois termos: o primeiro representa a direção horizontal (esquerda ou direita), e o segundo representa a direção vertical (topo ou fundo).

A ordem não importa e cada palavra-chave é opcional.
color-stop1, color-stop2,...

Os pontos de终点 de cor são as cores que você deseja exibir com transição suave entre elas.

Este valor é composto por valores de cor e um ou dois pontos de parada opcionais (porcentagem entre 0% e 100% ou comprimento ao longo do eixo de gradiente).

Detalhes técnicos

Versão: Módulo de Imagens CSS Level 3

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente a função pela primeira vez.

Chrome Edge Firefox Safari Opera
repeating-linear-gradient()
26 10 16 6.1 12.1
Dois pontos de终点 de cor de posição
71 79 64 12.1 58

Páginas relacionadas

Tutorial:Gradiente CSS

Referência:Propriedade background-image CSS

Referência:Função CSS conic-gradient()

Referência:Função CSS linear-gradient()

Referência:Função CSS radial-gradient()

Referência:Função repeating-conic-gradient() do CSS

Referência:Função repeating-radial-gradient() do CSS