Kazi repeating-radial-gradient

Kazi repeating-radial-gradient huweka mwinuko wa radia unaorudiwa. Hii inamaanisha tunaweka muundo maalum wa mwinuko, kwa mfano, kutoka 0px hadi 10px - mwinuko kutoka nyekundu hadi samawati na huu mwinuko utarudiwa kwenye kuzuia kote: 0px hadi 10px, kutoka 10px hadi 20px, kutoka 20px hadi 30px na kadhalika.

Kazi hufanya kazi na vigezo sawa na radial-gradient, tofauti ni tu katika athari ya kurudia. Vigezo vinavyokubalika angalia kwenye maelezo ya radial-gradient.

Kisarufu

csskichagua {
  background: repeating-radial-gradient([umbo aina msimamo], rangi1 ukubwa1, rangi2 ukubwa2...);
}

Mfano

Miduara inayolenga katikati:

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

Результат:

Mfano

Duaradufu zinazolenga katikati:

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

Результат:

Mfano

Tuweke miduara inayolenga katikati si katikati, lakini kwenye ukingo:

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

Результат:

Angalia pia