Exemple
A répéter gradient linéaire:
#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%);
} Essayez - le vous - même » Définition et utilisation
La repeating-linear-gradient() fonction est utilisée pour répéter des gradients linéaires.
| Version: | CSS3 |
|---|
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge pleinement la fonction.
Numbers suivis par -webkit-, -moz-, ou -O- précisent la première version qui a travaillé avec un préfixe.
| Fonction | |||||
|---|---|---|---|---|---|
| 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- |
Syntaxe CSS
background:
repeating-linear-gradient( angle | to side-or-corner , color-stop1 ,
color-stop2, ... );
| Valeur | La description |
|---|---|
| angle | Définit un angle de direction pour le dégradé. De 0deg à 360deg. Par défaut est 180deg. |
| side-or-corner | Définit la position du point de départ de la ligne de gradient. Il se compose de deux mots-clés: le premier indique le côté horizontal, à gauche ou à droite, et le second côté vertical, en haut ou en bas. L'ordre est pas pertinent et chacun des mots clés est facultative. |
| color-stop1, color-stop2,... | arrêts de couleurs sont les couleurs que vous souhaitez rendre des transitions en douceur entre. Cette valeur se compose d'une valeur de couleur, suivie d'une position d'arrêt facultatif (a percentage between 0% and 100% or a length along the gradient axis) le (a percentage between 0% and 100% or a length along the gradient axis) de (a percentage between 0% and 100% or a length along the gradient axis) . |
Autres exemples
Exemple
Différents gradients linéaires répétés:
#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) */
} Essayez - le vous - même » Pages associées
CSS tutoriel: CSS3 Dégradés
Fonctions CSS Référence