ფუნქცია repeating-radial-gradient

ფუნქცია repeating-radial-gradient აღწერს მეორდება რადიალურ გრადიენტს. ეს ნიშნავს, რომ ჩვენ ვადგენთ გრადიენტის გარკვეულ ნიმუშს, მაგალითად, 0px-დან 10px-მდე - გრადიენტი წითელიდან ცისფერამდე და ეს გრადიენტი განმეორდება მთელ ბლოკზე: 0px-დან 10px-მდე, 10px-დან 20px-მდე, 20px-დან 30px-მდე და ასე შემდეგ.

ფუნქცია მუშაობს იმავე პარამეტრებთან, რასაც radial-gradient, განსხვავება მხოლოდ გამეორების ეფექტშია. მიღებული პარამეტრების აღწერა იხილეთ radial-gradient-ის აღწერაში.

სინტაქსი

სელექტორი {
	background: repeating-radial-gradient([ფორმა ტიპი პოზიცია], ფერი1 ზომა1, ფერი2 ზომა2...);
}

მაგალითი

კონცენტრული წრეები:

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

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

მაგალითი

კონცენტრული ელიფსები:

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

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

მაგალითი

კონცენტრული წრეები არა ცენტრში, არამედ კიდეში:

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

იხილეთ აგრეთვე

ფუნქცია repeating-linear-gradient,
რომელიც ქმნის მეორდება ხაზოვან გრადიენტს
ფუნქცია linear-gradient,
რომელიც ქმნის ხაზოვან გრადიენტს
ფუნქცია radial-gradient,
რომელიც ქმნის რადიალურ გრადიენტს