repeating-radial-gradient funktsiyasi

repeating-radial-gradient funktsiyasi takrorlanuvchi radial gradientni belgilaydi. Bu shuni anglatadiki, biz gradientning ma'lum bir naqshini belgilaymiz, masalan, 0px dan 10px gacha - qizildan havorangga gradient va bu gradient butun blok bo'ylab takrorlanadi: 0px dan 10px gacha, 10px dan 20px gacha, 20px dan 30px gacha va hokazo.

Funktsiya radial-gradient bilan bir xil parametrlar bilan ishlaydi, farq faqat takrorlanish effektida. Qabul qilinadigan parametrlarni radial-gradient tavsifida ko'ring.

Sintaksis

cssselektor {
  background: repeating-radial-gradient([shakl turi joylashuvi], rang1 hajm1, rang2 hajm2...);
}

Misol

Markaziy doiralar:

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

Результат:

Misol

Markaziy ellipslar:

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

Результат:

Misol

Markaziy doiralarni markazda emas, balki chetda joylashtiramiz:

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

Результат:

Shuningdek qarang