repeating-conic-gradient()

CSS repeating-conic-gradient() funksiyasi konik gradientlarni takrorlash uchun ishlatiladi.

Konik gradient Takrorlanuvchi konik gradient

Misol

Takrorlanuvchi konik gradient:

#grad {   background-image: repeating-conic-gradient(red 10%, yellow 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-conic-gradient() 69 79 83 12.1 56

CSS sintaksisi

repeating-conic-gradient([from angle] [at position,] color degree, color degree, ...);
Qiymat Tavsif
from angle Ixtiyoriy. Butun konik gradient shu burchakka buriladi. Standart qiymat: 0deg
at position Ixtiyoriy. Konik gradientning markazini belgilaydi. Standart qiymat: center
color degree, ..., color degree 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 360 gacha bo‘lgan gradus yoki 0% dan 100% gacha bo‘lgan foiz) iborat.
Versiya: CSS Images moduli, 4-daraja


Ko‘proq misollar

Misol

Rang boshlanish va to‘xtash nuqtalari belgilangan takrorlanuvchi konik gradient:

#grad {   background-image: repeating-conic-gradient(red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg); }
O‘zingiz sinab ko‘ring »

Misol

from angle va at position belgilangan yana bir takrorlanuvchi konik gradient:

#grad1 {   background-image: repeating-conic-gradient(from 10deg at 30% 30%, red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg); }
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-linear-gradient() funksiyasi

CSS ma’lumotnomasi: CSS repeating-radial-gradient() funksiyasi


W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!