Функсияи 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;
}

Результат:

Ҳамчунин бубинед