radial-gradient()
CSS radial-gradient() funksiyasi fon rasmi sifatida radial gradientni o‘rnatadi.
Radial gradient o‘z markazi bilan aniqlanadi.
Radial gradient yaratish uchun kamida ikkita rang to‘xtash nuqtasini belgilashingiz kerak.
Radial gradient misoli:
Misol
Rang to‘xtash nuqtalari teng taqsimlangan radial gradient:
#grad {
background-image: radial-gradient(red, green, blue);
}
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 | |||||
|---|---|---|---|---|---|
| radial-gradient() | 26 | 10 | 16 | 6.1 | 12.1 |
| Ikki pozitsiyali rang to‘xtash nuqtalari | 71 | 79 | 64 | 12.1 | 58 |
CSS sintaksisi
radial-gradient(shape size at position, start-color, ..., last-color);
| Qiymat | Tavsif |
|---|---|
| shape | Gradient shaklini belgilaydi. Mumkin bo‘lgan qiymatlar:
|
| size | Gradient yakuniy shaklining o‘lchamini belgilaydi. Mumkin bo‘lgan qiymatlar:
|
| position | Gradientning joylashuvini belgilaydi. Standart qiymat: "center" |
| start-color, ..., last-color | 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: | CSS3 |
|---|
Ko‘proq misollar
Misol
Rang to‘xtash nuqtalari turlicha taqsimlangan radial gradient:
#grad {
background-image: radial-gradient(red 5%, green 15%, blue 60%);
}
O‘zingiz sinab ko‘ring »
Misol
Doira shaklidagi radial gradient:
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
O‘zingiz sinab ko‘ring »
Misol
Turli o‘lcham kalit so‘zlariga ega radial gradient:
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}
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 repeating-conic-gradient() funksiyasi
CSS ma’lumotnomasi: CSS repeating-linear-gradient() funksiyasi
CSS ma’lumotnomasi: CSS repeating-radial-gradient() funksiyasi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!