Функция repeating-radial-gradient

Функция repeating-radial-gradient қайталанатын радиалды градиентті орнатады. Бұл біз градиенттің белгілі бір өрнегін орнатамыз дегенді білдіреді, мысалы, 0px-ден 10px-ге дейін - қызыл түстен көк түске дейін және бұл градиент бүкіл блок бойынша қайталанады: 0px-ден 10px-ге дейін, 10px-ден 20px-ге дейін, 20px-ден 30px-ге дейін және т.с.с.

Функция radial-gradient пен бірдей параметрлермен жұмыс істейді, айырмашылығы тек қайталау әсерінде. Қабылданатын параметрлерді radial-gradient сипаттамасынан қараңыз.

Синтаксис

селектор {
	background: repeating-radial-gradient([форма тип позиция], түс1 өлшем1, түс2 өлшем2...);
}

Мысал

Концентрлі шеңберлер:

<div id="elem"></div>

#elem {
	background: repeating-radial-gradient(circle at center, red 0px, red 2px, white 2px, white 4px);
	width: 400px;
	height: 200px;
}

Мысал

Концентрлі эллипстер:

<div id="elem"></div>

#elem {
	background: repeating-radial-gradient(ellipse at center, red 0px, red 4px, white 4px, white 8px);
	width: 400px;
	height: 200px;
}

Мысал

Концентрлі шеңберлерді ортада емес, шетке орналастырайық:

<div id="elem"></div>

#elem {
	background: repeating-radial-gradient(circle at 50px 100px, red 0px, red 2px, white 2px, white 4px);
	width: 400px;
	height: 200px;
}

Сондай-ақ қараңыз

repeating-linear-gradient функциясы,
қайталанатын сызықтық градиентті жасайды
linear-gradient функциясы,
сызықтық градиентті жасайды
radial-gradient функциясы,
радиалды градиентті жасайды