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

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

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

სინტაქსი

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

მაგალითი

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

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

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

Результат:

მაგალითი

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

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

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

Результат:

მაგალითი

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

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

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

Результат:

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