Funkcija repeating-radial-gradient

Funkcija repeating-radial-gradient nosaka atkārtojošu radiālu gradientu. Tas nozīmē, ka mēs nosakām noteiktu gradienta rakstu, piemēram, no 0px līdz 10px - gradientu no sarkanas līdz ciānas krāsai, un šis gradients atkārtosies visā blokā: 0px līdz 10px, no 10px līdz 20px, no 20px līdz 30px un tā tālāk.

Funkcija strādā ar tiem pašiem parametriem kā radial-gradient, atšķirība ir tikai atkārtošanās efektā. Pieņemtos parametrus skatiet radial-gradient aprakstā.

Sintakse

cssselektors {
  background: repeating-radial-gradient([forma tips pozīcija], krāsa1 izmērs1, krāsa2 izmērs2...);
}

Piemērs

Koncentriski apļi:

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

Результат:

Piemērs

Koncentriski elipses:

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

Результат:

Piemērs

Novietosim koncentriskos apļus nevis centrā, bet malā:

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

Результат:

Skatiet arī