Fungsi repeating-linear-gradient() dalam CSS

Halaman sebelumnya Fungsi CSS repeating-conic-gradient()
Halaman berikutnya Fungsi CSS repeating-radial-gradient()
Kembali ke tingkat atas Panduan Referensi Fungsi CSS

Definisi dan penggunaan

CSS repeating-linear-gradient() Fungsi digunakan untuk gradasi linear yang diulang.

Contoh:

gradasi linear	gradasi linear yang diulang

linear-gradient(red, yellow, blue);	repeating-linear-gradient(red, yellow 10%, blue 20%);

实例

Contoh 1

Gradien linear yang diulang:

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

Coba Sendiri

Contoh 2

Gradien linear yang diulang berbeda-beda:

#grad1 {
  background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%);
}
#grad2 {
  background-image: repeating-linear-gradient(190deg, red, blue 7%, green 10%);
}
#grad3 {
  background-image: repeating-linear-gradient(90deg, red, blue 7%, green 10%);
}

Coba Sendiri

Syntaks CSS

repeating-linear-gradient(angle ke side-or-corner, color-stop1, color-stop2, ...);

Nilai	Deskripsi
angle	Definisi sudut arah gradien. Dari 0deg hingga 360deg. Nilai default adalah 180deg.
side-or-corner	Definisi posisi awal garis gradien. Itu terdiri dari dua kata kunci: yang pertama menunjukkan arah horisontal (kiri atau kanan), dan yang kedua menunjukkan arah vertikal (atas atau bawah). Urutan tidak penting, dan setiap kata kunci adalah pilihan.
color-stop1, color-stop2,...	Puncak warna adalah warna yang Anda inginkan untuk menampilkan transisi yang lancar diantara warna. Nilai ini terdiri dari nilai warna dan satu atau dua posisi penamat pilihan (persen dari 0% hingga 100% atau panjang di garis gradien).

Nilai

Deskripsi

angle

Definisi sudut arah gradien. Dari 0deg hingga 360deg. Nilai default adalah 180deg.

side-or-corner

Definisi posisi awal garis gradien.

Itu terdiri dari dua kata kunci: yang pertama menunjukkan arah horisontal (kiri atau kanan), dan yang kedua menunjukkan arah vertikal (atas atau bawah).

Urutan tidak penting, dan setiap kata kunci adalah pilihan.

color-stop1, color-stop2,...

Puncak warna adalah warna yang Anda inginkan untuk menampilkan transisi yang lancar diantara warna.

Nilai ini terdiri dari nilai warna dan satu atau dua posisi penamat pilihan (persen dari 0% hingga 100% atau panjang di garis gradien).