Fonksiyon repeating-linear-gradient

repeating-linear-gradient fonksiyonu tekrarlayan bir doğrusal gradyan tanımlar. Bu şu anlama gelir: belirli bir gradyan deseni belirleriz, örneğin, 0px'den 10px'ye - kırmızıdan maviye gradyan ve bu gradyan tüm blok boyunca tekrarlanacaktır: 0px'den 10px'ye, 10px'den 20px'ye, 20px'den 30px'ye ve bu böyle devam eder.

Bu fonksiyon, arka plan resmi tanımlayan özelliklere uygulanır: background, background-image veya kenarlık resmi: border-image, background-image-source.

Sözdizimi

seçici {
	background: repeating-linear-gradient([yön], renk1 boyut1, renk2 boyut2...);
}

Değerler

Değer	Açıklama
yön	Gradyanın belirli bir yönünü açı birimleriyle veya `top`, `left`, `right`, `bottom` anahtar kelimeleri veya bunların kombinasyonuyla belirtir. Kelimelerin sırası önemli değildir. Bu parametre isteğe bağlıdır: yazılmazsa, gradyan yukarıdan aşağıya doğru gider. Yönden önce `to` kelimesi koyulur.
açı	Herhangi bir açı birimi cinsinden açı. Pozitif veya negatif olabilir. Parametre isteğe bağlıdır. Aynı anda açı veya yön belirtilebilir (veya hiçbiri).
renk1	Herhangi bir renk birimi cinsinden gradyanın başlangıç rengi.
renk2	Herhangi bir renk birimi cinsinden gradyanın bitiş rengi.
boyut	Gradyanın belirli bir renginin uzunluğunu herhangi bir boyut birimi cinsinden belirtir.

Örnek . En basit varyant

Gradyan şöyle görünecek: 0px'den 20px'ye saf kırmızı renk, 20px'den 40px'ye - kırmızıdan maviye gradyan. Ve bu yukarıdan aşağıya tekrarlanacak (tekrarlayan gradyan olmasının sebebi budur):

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(red 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Örnek . Net renkler

Gradyan şöyle görünecek: 0px'den 20px'ye saf kırmızı renk, 20px'den 40px'ye - saf mavi (püf noktası şu ki, ikinci renk, birincinin bittiği yerde başlar). Ve bu yukarıdan aşağıya tekrarlanacak:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Örnek . Yönü değiştirelim

Şimdi gradyanın yönü sağdan sola olacak:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(to left, red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Örnek . Derece cinsinden yön

Yön olarak derece cinsinden bir açı belirleyelim:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

Örnek . Negatif değer

Yönü negatif bir değer yapalım:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(-45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

Ayrıca bakınız

repeating-radial-gradient fonksiyonu,
tekrarlayan bir radyal gradyan oluşturur
linear-gradient fonksiyonu,
doğrusal bir gradyan oluşturur
radial-gradient fonksiyonu,
radyal bir gradyan oluşturur