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