Funksioni repeating-radial-gradient

Funksioni repeating-radial-gradient përcakton një gradiënt radial përsëritës. Kjo do të thotë që ne përcaktojmë një model të caktuar të gradiëntit, për shembull, nga 0px deri në 10px - gradiënt nga e kuqja në të kaltër dhe ky gradiënt do të përsëritet në të gjithë bllokun: 0px deri në 10px, nga 10px deri në 20px, nga 20px deri në 30px e kështu me radhë.

Funksioni punon me të njëjtat parametra si radial-gradient, ndryshimi është vetëm në efektin e përsëritjes. Parametrat e pranuar shikoni në përshkrimin e radial-gradient.

Sintaksë

selektor {
	background: repeating-radial-gradient([formë lloj pozicion], ngjyra1 madhësia1, ngjyra2 madhësia2...);
}

Shembull

Rrathë koncentrikë:

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

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

Shembull

Elipse koncentrike:

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

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

Shembull

Të vendosim rrathë koncentrikë jo në qendër, por në anë:

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

Shihni gjithashtu

funksionin repeating-linear-gradient,
që krijon një gradiënt linear përsëritës
funksionin linear-gradient,
që krijon një gradiënt linear
funksionin radial-gradient,
që krijon një gradiënt radial