Fungsi repeating-linear-gradient() CSS

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

Definisi dan penggunaan

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

Contoh:

Gradasi Linear	Gradasi Linear Ulang

linear-gradient(merah, kuning, biru);	repeating-linear-gradient(merah, kuning 10%, biru 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:

#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

Sintaks 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 titik awal garis gradien. Ini terdiri dari dua kata kunci: yang pertama menunjukkan arah horizontal (left atau right), dan yang kedua menunjukkan arah vertikal (top atau bottom). Urutan tidak penting, dan setiap kata kunci adalah pilihan.
color-stop1, color-stop2,...	Titik pengakhiran warna adalah warna yang Anda inginkan untuk muncul transisi yang lancar diantara mereka. Nilai ini terdiri dari nilai warna dan satu atau dua lokasi berhenti pilihan (persentase antara 0% hingga 100% atau panjang di sepanjang sumbu gradien).

Nilai

Deskripsi

angle

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

side-or-corner

Definisi posisi titik awal garis gradien.

Ini terdiri dari dua kata kunci: yang pertama menunjukkan arah horizontal (left atau right), dan yang kedua menunjukkan arah vertikal (top atau bottom).

Urutan tidak penting, dan setiap kata kunci adalah pilihan.

color-stop1, color-stop2,...

Titik pengakhiran warna adalah warna yang Anda inginkan untuk muncul transisi yang lancar diantara mereka.

Nilai ini terdiri dari nilai warna dan satu atau dua lokasi berhenti pilihan (persentase antara 0% hingga 100% atau panjang di sepanjang sumbu gradien).