repeating-linear-gradient()
CSS repeating-linear-gradient() funksiyasi chiziqli gradientlarni takrorlash uchun ishlatiladi.
Misol:
| Chiziqli gradient | Takrorlanuvchi chiziqli gradient |
|---|---|
Misol
Takrorlanuvchi chiziqli gradient:
#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar funksiyani to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Funksiya | |||||
|---|---|---|---|---|---|
| repeating-linear-gradient() | 26 | 10 | 16 | 6.1 | 12.1 |
| Ikki pozitsiyali rang to‘xtash nuqtalari | 71 | 79 | 64 | 12.1 | 58 |
CSS sintaksisi
repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
| Qiymat | Tavsif |
|---|---|
| angle | Gradient uchun yo‘nalish burchagini belgilaydi. 0deg dan 360deg gacha. Standart qiymat: 180deg. |
| side-or-corner | Gradient chizig‘i boshlang‘ich nuqtasining joylashuvini belgilaydi. U ikkita kalit so‘zdan iborat: birinchisi gorizontal tomonni (left yoki right), ikkinchisi vertikal tomonni (top yoki bottom) bildiradi. Tartib muhim emas va har bir kalit so‘z ixtiyoriy. |
| color-stop1, color-stop2,... | Rang to‘xtash nuqtalari — ular orasida silliq o‘tishlar hosil qilmoqchi bo‘lgan ranglaringiz. Bu qiymat rang qiymati va undan keyin keladigan bitta yoki ikkita ixtiyoriy to‘xtash joyidan (0% dan 100% gacha bo‘lgan foiz yoki gradient o‘qi bo‘ylab uzunlik) iborat. |
| Versiya: | CSS Images moduli, 3-daraja |
|---|
Ko‘proq misollar
Misol
Turli takrorlanuvchi chiziqli gradientlar:
#grad1 {
background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%);
}
#grad2 {
background-image: repeating-linear-gradient(190deg, red, blue 7%, green 10%);
}
#grad3 {
background-image: repeating-linear-gradient(90deg, red, blue 7%, green 10%);
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS gradientlari
CSS ma’lumotnomasi: CSS background-image xususiyati
CSS ma’lumotnomasi: CSS conic-gradient() funksiyasi
CSS ma’lumotnomasi: CSS linear-gradient() funksiyasi
CSS ma’lumotnomasi: CSS radial-gradient() funksiyasi
CSS ma’lumotnomasi: CSS repeating-conic-gradient() funksiyasi
CSS ma’lumotnomasi: CSS repeating-radial-gradient() funksiyasi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!