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

Definição e uso

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

Gradiente radial	Gradiente radial repetido

radial-gradient(red, yellow, green);	repeating-radial-gradient(red, yellow 10%, green 15%);

Um gradiente radial repetido:

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

Outro gradiente radial repetido, configurado com forma, tamanho e posição:

#grad1 {
  background-image: repeating-radial-gradient(ellipse farthest-corner at 25% 25%, red, yellow 10%, green 15%);
}

Outro gradiente radial repetido, configurado com dois pontos de终点颜色:

#grad1 {
  background-image: repeating-radial-gradient(red 0% 10%, yellow 11% 21%, green 22% 32%);
}

repeating-radial-gradient(shape size at position, start-color, ... , last-color);

Valor	Descrição
shape	Define a forma do gradiente. Valores possíveis: ellipse (padrão) circle
size	Define o tamanho do gradiente. Valores possíveis: farthest-corner (padrão) closest-side closest-corner farthest-side
at position	Define a posição do gradiente. O valor padrão é "center".
start-color, ... , last-color	Os pontos de终点颜色 são as cores que você deseja que sejam exibidas com transição suave entre elas. Este valor é composto por valores de cor e uma ou duas posições de parada opcionais (porcentagem entre 0% e 100% ou comprimento ao longo do eixo de gradiente).