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

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

Piemērs

Koncentriski apļi:

<div id="elem"></div>

#elem {
	background: repeating-radial-gradient(circle at center, red 0px, red 2px, white 2px, white 4px);
	width: 400px;
	height: 200px;
}

Piemērs

Koncentriski elipses:

<div id="elem"></div>

#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ā:

<div id="elem"></div>

#elem {
	background: repeating-radial-gradient(circle at 50px 100px, red 0px, red 2px, white 2px, white 4px);
	width: 400px;
	height: 200px;
}

Skatiet arī

funkciju repeating-linear-gradient,
kura veido atkārtojošu lineāru gradientu
funkciju linear-gradient,
kura veido lineāru gradientu
funkciju radial-gradient,
kura veido radiālu gradientu