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

Результат:

Ошондой эле караңыз