Funksiya repeating-radial-gradient

Funksiya repeating-radial-gradient təkrarlanan radial qradiyenti təyin edir. Bu o deməkdir ki, biz qradiyentin müəyyən bir nümunəsini təyin edirik, məsələn, 0px-dən 10px-ə qədər - qırmızıdan maviyə qradiyent və bu qradiyent bütün blok boyunca təkrarlanacaq: 0px-dən 10px-ə qədər, 10px-dən 20px-ə qədər, 20px-dən 30px-ə qədər və s.

Funksiya radial-gradient ilə eyni parametrlərlə işləyir, fərq yalnız təkrarlama effektindədir. Qəbul edilən parametrlərə radial-gradient-in təsvirində baxın.

Sintaksis

cssselektor {
  background: repeating-radial-gradient([forma tip mövqe], reng1 ölçü1, reng2 ölçü2...);
}

Nümunə

Koncentrik dairələr:

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

Результат:

Nümunə

Koncentrik ellipslər:

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

Результат:

Nümunə

Koncentrik dairələri mərkəzdə yox, kənarda yerləşdirək:

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

Результат:

Həmçinin bax