Функция 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функциясы,
радиалды градиентті жасайды