Repeating-radial-gradient funksiýasy

repeating-radial-gradient funksiýasy gaýtalanýan radial gradienti kesgitleýär. Bu şu manyny aňladýar: biz gradientiň belli bir nagyşyny kesgitleýäris, meselem, 0px-den 10px-e çenli - gyzyl reňkden gök reňke gradient we bu gradient blok boýunça gaýtalanar: 0px-den 10px-e, 10px-den 20px-e, 20px-den 30px-e we şuňuň ýaly.

Funksiýa şol bir parametrler bilen işleýär radial-gradient ýaly, parklady gaýtalaw effekti. Gabyk edilýän parametrler barada radial-gradient funksiýanyň düşündirişine serediň.

Sintaksis

cssselektor {
  background: repeating-radial-gradient([forma görnüş ýagdaýy], reňk1 ölçegi1, reňk2 ölçegi2...);
}

Mysal

Merkezi aýlawlar:

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

Результат:

Mysal

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

Результат:

Mysal

Merkezi aýlawlary merkezde däl-de, gyrada ýerleşdireýliň:

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

Результат:

Şeýle-de görüň