CSS Dairesel Gradyan

CSS Dairesel Gradyan

Radyal gradyan, merkezi ile tanımlanır.

Radyal gradyan oluşturmak için, en az iki renk işaretçisi tanımlamanız gerekmektedir.

gramer

background-image: radyal-gradyan(şekil büyüklük at konum, başlangıç-renk, ... , son-renk);

varsayılan olarakşekil eliptik olarakbüyüklük en uzak köşe içinkonum merkezde.

Radyal gradyan - dengeli aralıklı renk işaretçileri (varsayılan)

Aşağıdaki örnek, dengeli aralıklı renk işaretçileri olan radyal gradyanı gösterir:

Örnek

#grad {
  background-image: radyal-gradyan(kırmızı, sarı, yeşil);
}

Kişisel olarak deneyin

Radyal gradyan - farklı aralıklı renk işaretçileri

Aşağıdaki örnek, renk işaretçileri arasındaki aralıkların farklı olduğu bir radyal gradyanı gösterir:

Örnek

#grad {
  background-image: radyal-gradyan(kırmızı 5%, sarı 15%, yeşil 60%);
}

Kişisel olarak deneyin

Şekli ayarlar

şekil Parametre, şekli tanımlar. circle veya elips değerlerini kabul eder. Varsayılan değeri elips (elips) dir.

Aşağıdaki örnek, bir dairesel radyal gradyanı gösterir:

Örnek

#grad {
  background-image: radyal-gradyan(kırmızı, sarı, yeşil);
}

Kişisel olarak deneyin

Farklı büyüklük anahtar kelimeleri kullanarak

büyüklük Parametre, gradyanın büyüklüğünü tanımlar. Dört değer kabul eder:

  • en yakın kenar
  • en uzak kenar
  • en yakın köşe
  • en uzak köşe

Örnek

Farklı size anahtar kelimeleri olan radyal gradyanlar ayarlandı:

#grad1 {
  background-image: radyal-gradyan (en yakın kenar, 60% 55%, kırmızı, sarı, siyah);
}
#grad2 {
  background-image: radyal-gradyan (en uzak kenar, 60% 55%, kırmızı, sarı, siyah);
}

Kişisel olarak deneyin

Yinelenen radyal gradyan

repeating-radial-gradient() Yinelenen radyal gradyan için fonksiyon kullanılır:

Örnek

Yinelenen radyal gradyan:

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

Kişisel olarak deneyin

CSS Gradyan Özellikleri

Aşağıdaki tablo, CSS gradyan özelliklerini sıralar:

Özellik Açıklama
background-image Bir elemente bir veya birkaç arka plan görseli ayarlamak için.