CSS repeating-linear-gradient() fonksiyonu

tanımlama ve kullanım

CSS tekrarlayan-dozumsal-yansıtma() tekrar eden lineer soluk değişikliği için fonksiyon kullanılır.

örnek:

lineer soluk değişikliği tekrar eden lineer soluk değişikliği
linear-gradient(red, yellow, blue); repeating-linear-gradient(red, yellow 10%, blue 20%);

örnek

Örnek 1

Bir tekrarlayan dozumsal yansıtma:

#grad {
  background-image: tekrarlayan-dozumsal-yansıtma(kırmızı, sarı 10%, yeşil 20%);
}

Deneyin

Örnek 2

Farklı tekrarlayan dozumsal yansıtmalar:

#grad1 {
  background-image: tekrarlayan-dozumsal-yansıtma(45deg, kırmızı, mavi 7%, yeşil 10%);
}
#grad2 {
  background-image: tekrarlayan-dozumsal-yansıtma(190deg, kırmızı, mavi 7%, yeşil 10%);
}
#grad3 {
  background-image: tekrarlayan-dozumsal-yansıtma(90deg, kırmızı, mavi 7%, yeşil 10%);
}

Deneyin

CSS dilbilgisi

tekrarlayan-dozumsal-yansıtma(angle to side-or-corner, color-stop1, color-stop2, ...);
Değer Açıklama
angle Yansıtma yönünü tanımlayan açıyı belirler. 0deg'den 360deg'e kadar. Varsayılan değeri 180deg'dir.
side-or-corner

Yansıtma çizgisinin başlangıç noktasının konumunu tanımlar.

Bu, iki anahtar kelime içerir: birincisi yatay yönde (sol veya sağ) ikincisi ise dikey yönde (üst veya alt) ifade eder.

Sıra önemli değil ve her anahtar kelime seçmeli olabilir.
color-stop1, color-stop2,...

Renk bitiş noktaları, arasında pürüzsüz geçiş sunmak istediğiniz renklerdir.

Bu değer, renk değerleri ve bir veya iki seçmeli durak noktasından (0% ile 100% arasındaki yüzdelik veya yansıtma ekseninin uzunluğu) oluşur.

Teknik ayrıntılar

Sürüm: CSS Images Module Level 3

Tarayıcı desteği

Tablodaki rakamlar, bu fonksiyonu tamamen destekleyen ilk tarayıcı sürümünü gösterir.

Chrome Edge Firefox Safari Opera
tekrarlayan-dozumsal-yansıtma()
26 10 16 6.1 12.1
İki konumun renk bitiş noktaları
71 79 64 12.1 58

İlgili sayfalar

Tutorial:CSS yansıtma

Referans:CSS background-image Özelliği

Referans:CSS konik yansıtma() fonksiyonu

Referans:CSS doğrusal yansıtma() fonksiyonu

Referans:CSS yuvarlak yansıtma() fonksiyonu

Referans:CSS repeating-conic-gradient() fonksiyonu

Referans:CSS repeating-radial-gradient() fonksiyonu