Fungsi repeating-linear-gradient

Fungsi repeating-linear-gradient menentukan gradien linier berulang. Ini berarti kita menentukan pola gradien tertentu, contohnya, dari 0px hingga 10px - gradien dari merah ke biru muda dan gradien ini akan berulang pada seluruh blok: 0px hingga 10px, dari 10px hingga 20px, dari 20px hingga 30px dan seterusnya.

Fungsi ini diterapkan pada properti yang menentukan gambar latar belakang: background, background-image atau gambar batas: border-image, background-image-source.

Sintaksis

selektor {
	background: repeating-linear-gradient([arah], warna1 ukuran1, warna2 ukuran2...);
}

Nilai

Nilai	Deskripsi
arah	Menentukan arah tertentu dari gradien dalam satuan sudut apapun atau dengan kata kunci `top`, `left`, `right`, `bottom` atau kombinasinya. Urutan kata tidak penting. Parameter ini opsional: jika tidak ditulis, gradien akan berjalan dari atas ke bawah. Sebelum arah ditambahkan kata `to`.
sudut	Sudut dalam satuan sudut apapun. Dapat bernilai positif atau negatif. Parameter ini opsional. Secara bersamaan dapat ditentukan sudut, atau arah (atau tidak ditulis sama sekali).
warna1	Warna awal gradien dalam satuan warna apapun.
warna2	Warna akhir gradien dalam satuan warna apapun.
ukuran	Menentukan rentang warna gradien tertentu dalam satuan ukuran apapun.

Contoh . Opsi paling sederhana

Gradien akan terlihat seperti ini: dari 0px hingga 20px warna merah polos, dari 20px hingga 40px - gradien dari merah ke biru muda. Dan akan berulang dari atas ke bawah (karena itulah disebut gradien berulang):

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

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

Contoh . Warna yang jelas

Gradien akan terlihat seperti ini: dari 0px hingga 20px warna merah polos, dari 20px hingga 40px - warna biru muda polos (fiturnya adalah warna kedua dimulai di tempat yang sama dimana warna pertama berakhir). Dan akan berulang dari atas ke bawah:

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

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

Contoh . Mengubah arah

Sekarang arah gradien akan dari kanan ke kiri:

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

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

Contoh . Arah dalam derajat

Sebagai arah, kita tentukan sudut dalam derajat:

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

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

Contoh . Nilai negatif

Mari buat arah dengan nilai negatif:

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

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

Lihat juga

fungsi repeating-radial-gradient,
yang membuat gradien radial berulang
fungsi linear-gradient,
yang membuat gradien linier
fungsi radial-gradient,
yang membuat gradien radial