Gradiente lineal de expresión lineal-gradiente:
lineal gradiente (? [<Ángulo> | <Side-o-esquina>,] <Color-STOP> [, <Color-STOP>] +);
Ver gradiente lineal de expresión, tiene que comenzar con el cerebro, y escindir sería comprensible.
Hablemos de algunos de comienzo real de la expresión:
background-image:linear-gradient(#62C292 0%,#F8CBAD 100%);
background-image:linear-gradient(0deg,#62C292 0%,#F8CBAD 100%);
background-image:linear-gradient(top,#62C292 0px,#F8CBAD 100px);
background-image:linear-gradient(90deg,#62C292 0%,#F8CBAD 50%,#62C292 100%);
background-image:linear-gradient(90deg,#62C292 0%,#F8CBAD 25%,#62C292 50%,#F8CBAD 75%,#62C292 100%);Debe entenderse por lo anterior -
Imagen de fondo: Linear-gradiente ([ángulos o esquinas,] x (0o1) + (longitud o espacio de color + + porcentuales) + [(color espacio + + longitud o porcentaje) xn (n > = 1)]);
[Angles o esquinas,] * (0o1)
medios
[<Ángulo> | <Lado-o-esquina>,]?
(Espacio de color + + longitud o porcentaje)
se refiere a
<Color parar>
[(Espacio de color + + longitud o porcentaje) * n (n> = 1 )]
medios
[, <Color-stop>] +
He dado expresión dentro de la "+", entendido como una fusión entre cadenas en él
No sé si habrá alrededor de la aureola, desde el principio yo estaba tan comprensible. En otro tipo de violencia, un simple punto -
"|" Significa "o (es decir, o)"
"?" significa "0 o 1"
"+" significa "uno o más"
O para la comprensión en profundidad del caso real, los siguientes resultados se basan en firefox38.0
El conocimiento del ángulo de un gradiente lineal
HTML en la parte del cuerpo -
<div style='width:100px;border:4px solid #3B9768;margin:10px'>
<p style='margin:5px;font-size:12px;text-align:center;'>0deg</p>
<div style='height:90px;margin:5px;background-color:transparent;background-image:linear-gradient(0deg,#62C292 0%,#F8CBAD 100%);'></div>
</div>
Sucesivamente el interior de la "45 grados" "0 grados" reemplazar "90 grados", "135deg", "180 grados".
El resultado es -
gradiente lineal desde el ángulo predeterminado en la dirección vertical en la parte inferior para comenzar a las agujas del reloj Girar.
En segundo lugar, dos o más colores y gradientes inquietantes <color parar>
Los ejemplos de una pluralidad de color de aspecto degradado.
La figura es una izquierda horizontal a la dirección derecha de la pendiente, y la longitud total del punto de partida conocido de la gradación, se puede determinar once <color-stop> posición (determinado por la longitud o porcentaje), en conjunción con la posición correspondiente en el color puede saber que un <color parar> y el siguiente <color parar> cómo la aparición de degradado de color.
La longitud total del pozo horizontal y vertical entenderse intuitivamente, sin duda, ancho del bloque de fondo o la altura. Si el ángulo de la pendiente no es horizontal y vertical, cómo se determina la longitud total del gradiente? Se entiende por la siguiente figura.
Como se muestra, el punto y final punto de partida del gradiente en una línea vertical a través de la línea central de la pendiente, y la dirección del gradiente se da un bloque, es posible determinar el punto de partida y la longitud total de la pendiente, por lo que hay n <color-stop >, se puede dividir en la n-1 de la región de transición.
Ejemplo:
el código HTML en la porción de cuerpo -
<div style='width:350px;height:220px;margin:5px;background-color:transparent;background-image:linear-gradient(135deg, #9DC3E6 0%, #F4B183 25%, #C9C9C9 50%, #FFD966 75%, #A9D18E 100%);'></div>
En tercer lugar, el resumen
De hecho, lineal gradiente no enfrente, comprender los principios minutos de gradiente de diversión.