Contoh
Sebuah mengulangi gradien linier:
#grad {
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red,
yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background:
-o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6
to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%,
green 20%);
/* Standard syntax */
background:
repeating-linear-gradient(red, yellow 10%, green 20%);
} Cobalah sendiri " Definisi dan Penggunaan
The repeating-linear-gradient() adalah fungsi yang digunakan untuk mengulang gradien linier.
| Versi: | CSS3 |
|---|
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung fungsi.
Nomor diikuti oleh -webkit-, moz, atau -o- menentukan versi pertama yang bekerja dengan awalan.
| Fungsi | |||||
|---|---|---|---|---|---|
| repeating-linear-gradient() | 26,0 10,0 -webkit- | 10,0 | 16.0 3.6 moz | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
CSS Syntax
background:
repeating-linear-gradient( angle | to side-or-corner , color-stop1 ,
color-stop2, ... );
| Nilai | Deskripsi |
|---|---|
| angle | Mendefinisikan sudut arah untuk gradien. Dari 0deg ke 360deg. Default adalah 180deg. |
| side-or-corner | Mendefinisikan posisi titik awal dari garis gradien. Ini terdiri dari dua kata kunci: yang pertama menunjukkan sisi horisontal, kiri atau kanan, dan yang kedua sisi vertikal, atas atau bawah. order tidak relevan dan masing-masing kata kunci adalah opsional. |
| color-stop1, color-stop2,... | berhenti warna warna yang Anda inginkan untuk membuat transisi halus antara. Nilai ini terdiri dari nilai warna, diikuti oleh berhenti posisi opsional (a percentage between 0% and 100% or a length along the gradient axis) . |
Contoh lebih
Contoh
Berbeda berulang gradien linier:
#grad1 {
height: 200px;
background: -webkit-repeating-linear-gradient(45deg,red,blue
7%,green 10%); /* For Safari 5.1 to 6.0 */
background:
-o-repeating-linear-gradient(45deg,red,blue 7%,green 10%); /* For Opera 11.1
to 12.0 */
background: -moz-repeating-linear-gradient(45deg,red,blue
7%,green 10%); /* For Firefox 3.6 to 15 */
background:
repeating-linear-gradient(45deg,red,blue 7%,green 10%); /* Standard syntax
(must be last) */
}
#grad2 {
height: 200px;
background: -webkit-repeating-linear-gradient(190deg,red,blue
7%,green 10%); /* For Safari 5.1 to 6.0 */
background:
-o-repeating-linear-gradient(190deg,red,blue 7%,green 10%); /* For Opera
11.1 to 12.0 */
background: -moz-repeating-linear-gradient(190deg,red,blue
7%,green 10%); /* For Firefox 3.6 to 15 */
background:
repeating-linear-gradient(190deg,red,blue 7%,green 10%); /* Standard syntax
(must be last) */
}
#grad3 {
height: 200px;
background: -webkit-repeating-linear-gradient(90deg,red,blue
7%,green 10%); /* For Safari 5.1 to 6.0 */
background:
-o-repeating-linear-gradient(); /* For Opera 11.1 to 12.0 */
background:
-moz-repeating-linear-gradient(90deg,red,blue 7%,green 10%); /* For Firefox
3.6 to 15 */
background: repeating-linear-gradient(90deg,red,blue
7%,green 10%); /* Standard syntax (must be last) */
} Cobalah sendiri " Pages terkait
CSS tutorial: CSS3 Gradien
CSS Fungsi Referensi