Funcția repeating-radial-gradient

Funcția repeating-radial-gradient definește un gradient radial repetat. Aceasta înseamnă că definim un model specific de gradient, de exemplu, de la 0px până la 10px - gradient de la roșu la albastru deschis și acest gradient se va repeta pe întregul bloc: de la 0px până la 10px, de la 10px până la 20px, de la 20px până la 30px și așa mai departe.

Funcția lucrează cu aceiași parametri ca și radial-gradient, diferența fiind doar în efectul de repetare. Parametrii acceptați sunt prezentați în descrierea funcției radial-gradient.

Sintaxă

cssselector {
  background: repeating-radial-gradient([formă tip poziție], culoare1 dimensiune1, culoare2 dimensiune2...);
}

Exemplu

Cercuri concentrice:

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;
}

Результат:

Exemplu

Elipse concentrice:

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;
}

Результат:

Exemplu

Plasează cercurile concentrice nu în centru, ci la margine:

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;
}

Результат:

Vezi și