Ejemplo
Un gradiente lineal repitiendo:
#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%);
} Inténtalo tú mismo " Definición y Uso
La repeating-linear-gradient() función se utiliza para repetir degradados lineales.
| Versión: | CSS3 |
|---|
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la función.
Los números seguidos por -webkit-, -moz-, o -O- especifican la primera versión que funcionaba con un prefijo.
| Función | |||||
|---|---|---|---|---|---|
| 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- |
sintaxis CSS
background:
repeating-linear-gradient( angle | to side-or-corner , color-stop1 ,
color-stop2, ... );
| Valor | Descripción |
|---|---|
| angle | Define un ángulo de la dirección del gradiente. A partir de 0 grados a 360deg. El valor predeterminado es 180 grados. |
| side-or-corner | Define la posición del punto de partida de la línea de gradiente. Se compone de dos palabras clave: el primero indica el lado horizontal, hacia la izquierda o la derecha, y el segundo el lado vertical, arriba o abajo. El orden no es relevante y cada uno de la palabra clave es opcional. |
| color-stop1, color-stop2,... | paradas de color son los colores que desee para hacer transiciones suaves entre. Este valor se compone de un valor de color, seguida de una posición de tope opcional (a percentage between 0% and 100% or a length along the gradient axis) . |
Más ejemplos
Ejemplo
Diferentes gradientes lineales que se repiten:
#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) */
} Inténtalo tú mismo " Páginas relacionadas
CSS tutorial: CSS3 gradientes
Funciones Referencia CSS