Funktionen repeating-radial-gradient

Funktionen repeating-radial-gradient skapar en upprepad radiell gradient. Det betyder att vi sätter ett visst gradientmönster, till exempel från 0px till 10px - en gradient från rött till blått och denna gradient kommer att upprepas över hela blocket: 0px till 10px, från 10px till 20px, från 20px till 30px och så vidare.

Funktionen fungerar med samma parametrar som radial-gradient, skillnaden är bara i upprepningseffekten. Se de accepterade parametrarna i beskrivningen av radial-gradient.

Syntax

selektor {
	background: repeating-radial-gradient([form typ position], färg1 storlek1, färg2 storlek2...);
}

Exempel

Koncentriska cirklar:

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

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

Exempel

Koncentriska ellipser:

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

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

Exempel

Placera de koncentriska cirklarna inte i mitten, utan vid kanten:

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

Se även

funktionen repeating-linear-gradient,
som skapar en upprepad linjär gradient
funktionen linear-gradient,
som skapar en linjär gradient
funktionen radial-gradient,
som skapar en radiell gradient