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

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

Örnek

Eş merkezli daireler:

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

Результат:

Örnek

Eş merkezli elipsler:

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

Результат:

Örnek

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

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

Результат:

Ayrıca bakınız