Fungsi repeating-linear-gradient

Fungsi repeating-linear-gradient menetapkan gradien linear berulang. Ini bermakna kita menetapkan corak gradien tertentu, contohnya, dari 0px hingga 10px - gradien dari merah ke biru dan gradien ini akan berulang pada keseluruhan blok: 0px hingga 10px, dari 10px hingga 20px, dari 20px hingga 30px dan seterusnya.

Fungsi ini digunakan untuk sifat-sifat yang menetapkan imej latar belakang: background, background-image atau imej sempadan: border-image, background-image-source.

Sintaks

selector {
	background: repeating-linear-gradient([arah], warna1 saiz1, warna2 saiz2...);
}

Nilai

Nilai	Keterangan
arah	Menetapkan arah tertentu gradien dalam sebarang unit untuk sudut atau dengan kata kunci `top`, `left`, `right`, `bottom` atau gabungannya. Urutan kata tidak penting. Parameter adalah pilihan: jika tidak ditulis, gradien akan mengalir dari atas ke bawah. Sebelum arah diletakkan kata `to`.
sudut	Sudut dalam sebarang unit untuk sudut. Boleh positif atau negatif. Parameter adalah pilihan. Serentak boleh ditentukan sama ada sudut, atau arah (atau langsung tiada).
warna1	Warna permulaan gradien dalam sebarang unit untuk warna.
warna2	Warna akhir gradien dalam sebarang unit untuk warna.
saiz	Menetapkan panjang warna tertentu gradien dalam sebarang unit untuk saiz.

Contoh . Pilihan paling mudah

Gradien akan kelihatan seperti ini: dari 0px hingga 20px warna merah tulen, dari 20px hingga 40px - gradien dari merah ke biru. Dan ini akan berulang dari atas ke bawah (untuk itulah ia gradien berulang):

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

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

Contoh . Warna tajam

Gradien akan kelihatan seperti ini: dari 0px hingga 20px warna merah tulen, dari 20px hingga 40px - warna biru tulen (caranya ialah warna kedua bermula di tempat yang berakhir warna pertama). Dan ini 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 . Ubah 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 darjah

Sebagai arah kita tentukan sudut dalam darjah:

<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 mencipta gradien radial berulang
fungsi linear-gradient,
yang mencipta gradien linear
fungsi radial-gradient,
yang mencipta gradien radial