Função repeating-radial-gradient

A função repeating-radial-gradient define um gradiente radial repetitivo. Isso significa que definimos um padrão específico de gradiente, por exemplo, de 0px a 10px - gradiente de vermelho para azul claro e este gradiente se repetirá por todo o bloco: de 0px a 10px, de 10px a 20px, de 20px a 30px e assim por diante.

A função funciona com os mesmos parâmetros que radial-gradient, a diferença está apenas no efeito de repetição. Consulte os parâmetros aceitos na descrição de radial-gradient.

Sintaxe

cssseletor {
  background: repeating-radial-gradient([forma tipo posição], cor1 tamanho1, cor2 tamanho2...);
}

Exemplo

Círculos concêntricos:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(circle at center, red 0px, red 2px, white 2px, white 4px);
  width: 400px;
  height: 200px;
}

Результат:

Exemplo

Elipses concêntricas:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(ellipse at center, red 0px, red 4px, white 4px, white 8px);
  width: 400px;
  height: 200px;
}

Результат:

Exemplo

Vamos posicionar os círculos concêntricos não no centro, mas na borda:

html<div id="elem"></div>

css#elem {
  background: repeating-radial-gradient(circle at 50px 100px, red 0px, red 2px, white 2px, white 4px);
  width: 400px;
  height: 200px;
}

Результат:

Veja também