Fonksiyon repeating-radial-gradient

Fonksiyon repeating-radial-gradient tekrarlayan bir radyal degrade tanımlar. Bu şu anlama gelir: belirli bir degrade deseni tanımlarız, örneğin, 0px'den 10px'ye - kırmızıdan maviye bir degrade ve bu degrade tüm blok boyunca tekrarlanacaktır: 0px'den 10px'ye, 10px'den 20px'ye, 20px'den 30px'ye ve bu şekilde devam eder.

Fonksiyon, radial-gradient ile aynı parametrelerle çalışır, fark sadece tekrarlama efektindedir. Kabul edilen parametreler için radial-gradient açıklamasına bakın.

Sözdizimi

seçici {
	background: repeating-radial-gradient([şekil tip konum], renk1 boyut1, renk2 boyut2...);
}

Örnek

Eş merkezli daireler:

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

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

Örnek

Eş merkezli elipsler:

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

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

Örnek

Eş merkezli daireleri merkezde değil, kenara yerleştirelim:

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

Ayrıca bakınız

repeating-linear-gradient fonksiyonu,
tekrarlayan bir lineer degrade oluşturur
linear-gradient fonksiyonu,
bir lineer degrade oluşturur
radial-gradient fonksiyonu,
bir radyal degrade oluşturur