English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
función repeating de CSS-linear-gradient() crea una <image> compuesta por un gradiente lineal repetido, similar a la función repeating de CSS.-La función gradient(), que toma los mismos parámetros, pero repetirá el gradiente en todas las direcciones para cubrir toda la contenedor. El resultado de esta función es un objeto de tipo <gradient>, que es un tipo especial de <image>.
Gradiente lineal repetido:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial básico (oldtoolbag.com)</title>/title>
<style>
#grad1 {
altura: 200px;
fondo-color: rojo; /* Se muestra cuando el navegador no admite */
fondo-image: repetición-linear-gradient(rojo, verde 10,verde 20%);
}
#grad2 {
altura: 200px;
fondo-color: rojo; /* Se muestra cuando el navegador no admite */
fondo-image: repetición-linear-gradient(45deg,rojo,amarillo 7,green 10%);
}
#grad3 {
altura: 200px;
fondo-color: rojo; /* Se muestra cuando el navegador no admite */
fondo-image: repetición-linear-gradient(190deg,rojo,amarillo 7,green 10%);
}
#grad4 {
altura: 200px;
fondo-color: rojo; /* Se muestra cuando el navegador no admite */
fondo-image: repetición-linear-gradient(90deg,rojo,amarillo 7,green 10%);
}
</style>
</head>
<body>
<h1>Gradiente lineal repetido</h1>
<div id="grad1></div>
<p>45deg:</p>
<div id="grad2></div>
<p>190deg:</p>
<div id="grad3></div>
<p>90deg:</p>
<div id="grad4></div>
<p><strong>Nota:/strong> Internet Explorer 9 Los navegadores IE anteriores a la versión especificada no admiten el gradiente lineal./p>
</body>
</html>Prueba y mira ‹/›función-linear-La función gradient() se utiliza para crear una "imagen" de gradiente lineal repetido.
Versión de soporte: CSS3
Los números en la tabla representan la primera versión del navegador que admite la función.
"webkit" o "moz" o "o" especifican el número que indica la primera versión de soporte del prefijo para la función.
| función | |||||
|---|---|---|---|---|---|
| función-linear-repetición | 26gradient() 10gradient() -moz- | 10gradient() | 16gradient() 3webkit6 -.0- | 6webkit1 5webkit1 -moz- | 12webkit1 11webkit1 -.- |
sintaxis CSS-linear-fondo: repetición(angle | to side-o-esquina, color-stop1, color-stop2,...);
| Valor | Descripción |
|---|---|
| ángulo | Define la dirección del ángulo del gradiente. De 0deg a 360deg，por defecto de 180deg。 |
| lado-o-esquina | Especifica la posición de inicio del gradiente lineal. Se compone de dos palabras clave: la primera especifica la posición horizontal (izquierda o derecha), la segunda especifica la posición vertical (arriba o abajo). El orden es arbitrario, cada palabra clave es opcional. |
| color-stop1, color-stop2,... | Especifica los colores de inicio y fin del gradiente, compuestos por valores de color y posiciones de parada (opcional, especificado en porcentajes). |
Diferentes gradientes repetidos:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial básico (oldtoolbag.com)</title>/title>
<style>
#grad1 {
altura: 200px;
fondo-image: repetición-linear-gradient(45deg,red,blue 7,green 10%);
}
#grad2 {
altura: 200px;
fondo-image: repetición-linear-gradient(190deg,red,blue 7,green 10%);
}
#grad3 {
altura: 200px;
fondo-image: repetición-linear-gradient(90deg,red,blue 7,green 10%);
}
</style>
</head>
<body>
<h3>Gradiente lineal repetido</h3>
<p>45 grados de gradiente lineal, de rojo a azul:</p>
<div id="grad1></div>
<p>190 grados de gradiente lineal, de rojo a azul:</p>
<div id="grad2></div>
<p>90 grados de gradiente lineal, de rojo a azul:</p>
<div id="grad3></div>
<p><strong>Nota:</strong> Internet Explorer 9 y versiones anteriores IE no admiten gradientes.</p>
</body>
</html>Prueba y mira ‹/›Tutorial CSS: CSS3 Gradiente