Exemplu
Un gradient linear repetă:
#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%);
} Încearcă - l singur » Definiție și utilizare
repeating-linear- gradient() funcție este utilizată pentru a repeta gradienților liniari.
| Versiune: | CSS3 |
|---|
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin funcția.
Numerele urmat de -webkit-, -moz- sau -o- specificați prima versiune care a lucrat cu un prefix.
| Funcţie | |||||
|---|---|---|---|---|---|
| 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 Sintaxa
background:
repeating-linear-gradient( angle | to side-or-corner , color-stop1 ,
color-stop2, ... );
| Valoare | Descriere |
|---|---|
| angle | Definește un unghi de direcție pentru gradientul. De la 0deg la 360deg. Implicit este 180deg. |
| side-or-corner | Definește poziția de pornire-punct al liniei de gradient. Se compune din două cuvinte cheie: prima indică partea orizontală, la stânga sau la dreapta, iar al doilea vertical lateral, de sus sau de jos. Ordinea nu este relevantă și fiecare cuvânt cheie este opțională. |
| color-stop1, color-stop2,... | stații de culoare sunt culorile pe care doriți să facă o tranziție lină între. Această valoare constă într - o valoare de culoare, urmată de o poziție de oprire opțională (a percentage between 0% and 100% or a length along the gradient axis) de-a (a percentage between 0% and 100% or a length along the gradient axis) . |
Mai multe exemple
Exemplu
Diferite gradienți liniare repetitoare:
#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) */
} Încearcă - l singur » Pagini similare
Tutorial CSS: CSS3 Pante
Funcții de referință CSS