CSS radial-gradient() fonksiyonu

Önceki sayfa CSS pow() fonksiyonu
Sonraki sayfa CSS ray() fonksiyonu
Üst düzeye dön CSS Fonksiyon Referans Kılavuzu

Tanımlama ve kullanım

CSS radial-gradient() Fonksiyon daire yuvarlaklaşmayı arka plan görseli olarak ayarlar.

Daire yuvarlaklaşma merkezi tarafından tanımlanır.

Daire yuvarlaklaşma oluşturmak için en az iki renk etiketi tanımlanmalıdır.

Daire yuvarlaklaşma örneği:

Örnek

Örnek 1

Düzenli dağılımda renk etiketleri renk yuvarlaklaşma:

#grad {
  background-image: radial-gradient(red, green, blue);
}

Deneyin

Örnek 2

Farklı daire yuvarlaklaşma dağılımı renk etiketleri:

#grad {
  background-image: radial-gradient(red 5%, green 15%, blue 60%);
}

Deneyin

Örnek 3

Daire şeklindeki radiusal gradyan:

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

Deneyin

Örnek 4

Farklı boyut anahtar kelimeleri kullanarak radiusal gradyanlar:

#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);
}

Deneyin

CSS dilbilgisi

radial-gradient(şekil boyut at konum, start-color, ... , last-color);

değer	tanım
şekil	Gradyanın şeklini tanımlar. Olası değerler: oval (varsayılan) daire
boyut	Gradyanın boyutunu tanımlar. Olası değerler: en uzak köşe (varsayılan) en yakın yan en yakın köşe en uzak yan
konum	Gradyanın konumunu tanımlar. Varsayılan değeri "merkez"tir.
start-color, ... , last-color	Renk işaretçileri, aralarında pürüzsüz geçiş göstermek istediğiniz renklerdir. Bu değer, bir renk değeri içerir ve ardından bir veya iki seçmeli renk işaretçisi konumu (0% ile 100% arasındaki yüzdelik veya gradyan ekseninin uzunluğunda) izler.