El degradado se compone de una transición gradual entre dos o más colores. Es un tipo especial de imagen, dividido en degradado lineal y degradado radial. Estos dos tipos de degradados también se subdividen en simples y repetidos. En comparación con la imagen tradicional, la imagen de degradado tiene las ventajas de ocupar menos bytes, evitar solicitudes de servidor adicionales y reducir el costo de depuración. En tiempos de paz, usa tu imaginación y usa el degradado para crear muchos efectos visuales maravillosos.
Uno, gradiente lineal
Los degradados lineales usan la función de degradado lineal () para dibujar un fondo degradado a lo largo de una línea de degradado desde un cierto lado o ángulo. La dirección predeterminada del fondo es de arriba a abajo del elemento, como se muestra en la siguiente figura.
div {
fondo: gradiente lineal (# FC0, # F60);
}
1) línea de degradado
La línea de gradiente pasará a través del punto central del elemento y rotará en el sentido de las agujas del reloj, como se muestra en la figura a continuación, en 50 °. El punto de partida de la línea de degradado es la intersección del vértice más cercano del elemento y la línea vertical de la línea de degradado, y el punto final es la intersección del vértice más alejado del elemento y la línea vertical de la línea de degradado. El cuadrante se refiere a las cuatro áreas divididas por el eje horizontal y el eje vertical en el sistema de coordenadas rectangulares planas.
En la figura, 0% y 100% indican la posición de la primera y la última escala de colores, respectivamente, y el porcentaje se refiere a la longitud de la línea de degradado. Tenga en cuenta que el color de cada punto en la línea de degradado se extenderá hacia afuera a lo largo de la línea vertical, como se muestra en la siguiente figura.
2) dirección
La dirección de la línea de degradado se puede extender a cuatro lados (arriba, abajo, izquierda y derecha) en combinación con la palabra clave to. El valor predeterminado es abajo. El siguiente estilo se modificará al gradiente correcto, el efecto se muestra a continuación.
div {
fondo: gradiente lineal (a la derecha, # FC0, # F60);
}
Combine las palabras clave de cuatro lados en pares y úselas con para declarar un ángulo. Por ejemplo, arriba a la derecha significa el cuadrante superior derecho. Tenga en cuenta que no es la esquina superior derecha, es decir, la línea de degradado no pasa a través de los dos vértices diagonales del elemento. Como se muestra en la figura a continuación, la línea de gradiente en la parte superior derecha es una línea continua con una flecha en lugar de la línea de puntos.
Además de usar palabras clave, también puede especificar el ángulo en unidades de grados, lo que puede cambiar de forma más intuitiva la dirección de la línea de degradado, como 30 grados.
div {
fondo: gradiente lineal (30deg, # FC0, # F60);
}
3) código de color
Después de especificar la dirección, le seguirá un conjunto de marcas de color separadas por comas, es decir, la posición donde cambia el color. Por ejemplo, coloque # FC0 al 20% de la línea de degradado como se muestra a continuación.
div {
fondo: gradiente lineal (30 grados, # FC0 20%, # F60);
}
Si coloca los dos parches de color en la misma posición, puede producir un efecto de cambio repentino (comúnmente utilizado para lograr rayas), como se muestra en el siguiente código. En la imagen a continuación, la izquierda es una imagen de degradado y la derecha es una imagen nítida.
div {
fondo: gradiente lineal (30 grados, # FC0 20%, # F60 20%);
}
Cuando el tamaño del degradado se establece explícitamente en 0, el efecto de cambio agudo también se puede lograr, el estilo es el siguiente.
div {
fondo: gradiente lineal (30 grados, # FC0 20%, # F60 0);
}
4) Punto de color medio
La función del punto de color medio es modificar el modo de fusión en ambos lados, es decir, definir cómo procede el gradiente entre colores adyacentes. Por defecto, el punto de color medio está en el punto medio entre las posiciones finales de los dos colores.
Tome el siguiente estilo como ejemplo, la transición de amarillo al 20% (# FC0) a naranja al 100% (# F60), el punto medio de los dos es 60%.
div {
fondo: gradiente lineal (30 grados, # FC0 20%, # F60);
}
Al especificar el punto de color medio, debe omitir el color. Como se muestra en el siguiente código, mueva el punto de color medio al 40%. El efecto de gradiente se muestra en el lado derecho de la figura a continuación. El lado izquierdo es el gradiente predeterminado.
div {
fondo: gradiente lineal (30 grados, # FC0 20%, 40%, # F60);
}
Segundo, el gradiente radial
El gradiente radial se irradiará hacia afuera desde un origen, y el área de cobertura puede ser circular o elíptica, que a menudo se usa para focos, ondas de la superficie del agua y otros efectos. Al implementar un gradiente radial, se utiliza la función radial-gradient (), en la que se pueden declarar parámetros como la forma, el tamaño, el punto central, la escala de colores, etc.
1) forma y tamaño
Puede declarar explícitamente la forma del degradado a través de las dos palabras clave círculo o elipse, como se muestra a continuación.
.circle {
fondo: gradiente radial (círculo, # FC0, # F60);
}
.ellipse {
fondo: degradado radial (elipse, # FC0, # F60);
}
En los dos estilos siguientes, cuando se declara un radio, se puede generar un gradiente circular, el efecto está en el lado izquierdo de la figura a continuación; cuando se declaran dos radios diferentes, se puede generar un gradiente elíptico, el efecto está en el lado derecho de la figura a continuación.
.circle {
fondo: gradiente radial (20px, # FC0, # F60);
}
.ellipse {
fondo: gradiente radial (50px 20px, # FC0, # F60);
}
Tenga en cuenta que el radio de un círculo no se puede establecer como un porcentaje, y la elipse sí. El primer radio porcentual de la elipse se refiere al eje horizontal (el ancho de la imagen de fondo), y el segundo se refiere al eje vertical (la altura de la imagen de fondo), como se muestra a continuación.
div {
fondo: gradiente radial (25% 20%, # FC0, # F60);
}
Además de especificar el tamaño del gradiente por longitud y porcentaje, también se admiten cuatro palabras clave, como se muestra en la siguiente tabla, donde la esquina más alejada es el valor predeterminado para los gradientes radiales.
| Palabra clave | Efecto |
| lado más cercano | Cuando se trata de un círculo, el borde degradado se extiende hasta el borde más cercano al punto central de la imagen degradada; cuando se trata de una elipse, el borde degradado se extiende hasta los ejes horizontal y vertical más cercanos al punto central de la imagen degradada |
| lado más alejado | Cuando se trata de un círculo, el borde degradado se extiende hasta el borde más alejado del punto central de la imagen degradada; cuando se trata de una elipse, el borde degradado se extiende hasta el eje horizontal y el eje vertical más alejado del punto central de la imagen degradada. |
| esquina más cercana | El borde degradado toca la esquina más cercana al punto central en la imagen degradada |
| esquina más alejada | El borde degradado toca la esquina de la imagen degradada más alejada del punto central |
En la figura siguiente, las cuatro palabras clave se aplican a círculos y elipses, y las coordenadas del punto central se cambian para facilitar la observación.
2) Punto central
El punto central del área del gradiente se puede establecer en el valor de posición del atributo de posición de fondo, como arriba a la derecha, 30px 50px, etc., pero para distinguir el valor de tamaño del gradiente, debe estar separado por at, como se muestra a continuación.
div {
background: radial-gradient (círculo a 30px 50px, # FC0, # F60);
}
3) rayos de gradiente
A diferencia de los gradientes lineales, el rayo de gradiente de un gradiente radial extenderá innumerables líneas hacia afuera desde el punto central, como se muestra en la siguiente figura. Cuando el gradiente es un círculo, la distancia entre el punto final del rayo gradiente y el punto central es el radio del círculo; cuando el gradiente es una elipse, la distancia entre el punto final del rayo gradiente y el punto central está determinada por el eje horizontal de la elipse.
Tres, repite el gradiente
Tanto los gradientes lineales como los gradientes radiales tienen funciones de repetición correspondientes. El primero es repetición-gradiente-lineal () y el segundo es repetición-gradiente-radial (). El número de repeticiones está determinado por el atributo de tamaño de fondo y el tamaño del elemento. En la figura siguiente, hay dos conjuntos de gradientes (los estilos son los siguientes), donde el lado izquierdo de cada grupo es el efecto del gradiente una vez, y el lado derecho es el efecto de gradientes repetidos.
.linear {
fondo: gradiente lineal (30deg, # FC0, # F60 30px);
}
.repeating-linear {
fondo: gradiente-lineal-repetitivo (30deg, # FC0, # F60 30px);
}
.radial {
fondo: gradiente radial (30px, # FC0, # F60);
}
.repeating-radial {
fondo: gradiente-radial-repetido (30px, # FC0, # F60);
}
Hay muchos usos ingeniosos de gradientes repetidos, como generar un fondo rayado, el estilo es el siguiente y el efecto se muestra en la siguiente figura.
.stripe {
fondo: gradiente lineal repetido (30 grados, transparente, transparente 10px, # F60 0, # F60 20px);
}
El degradado se compone de una transición gradual entre dos o más colores. Es un tipo especial de imagen, dividido en degradado lineal y degradado radial. Estos dos tipos de degradados también se subdividen en simples y repetidos. En comparación con la imagen tradicional, la imagen de degradado tiene las ventajas de ocupar menos bytes, evitar solicitudes de servidor adicionales y reducir el costo de depuración. En tiempos de paz, usa tu imaginación y usa el degradado para crear muchos efectos visuales maravillosos.
Uno, gradiente lineal
Los degradados lineales usan la función de degradado lineal () para dibujar un fondo degradado a lo largo de una línea de degradado desde un cierto lado o ángulo. La dirección predeterminada del fondo es de arriba a abajo del elemento, como se muestra en la siguiente figura.
div {
fondo: gradiente lineal (# FC0, # F60);
}
1) línea de degradado
La línea de gradiente pasará a través del punto central del elemento y rotará en el sentido de las agujas del reloj, como se muestra en la figura a continuación, en 50 °. El punto de partida de la línea de degradado es la intersección del vértice más cercano del elemento y la línea vertical de la línea de degradado, y el punto final es la intersección del vértice más alejado del elemento y la línea vertical de la línea de degradado. El cuadrante se refiere a las cuatro áreas divididas por el eje horizontal y el eje vertical en el sistema de coordenadas rectangulares planas.
En la figura, 0% y 100% indican la posición de la primera y la última escala de colores, respectivamente, y el porcentaje se refiere a la longitud de la línea de degradado. Tenga en cuenta que el color de cada punto en la línea de degradado se extenderá hacia afuera a lo largo de la línea vertical, como se muestra en la siguiente figura.
2) dirección
La dirección de la línea de degradado se puede extender a cuatro lados (arriba, abajo, izquierda y derecha) en combinación con la palabra clave to. El valor predeterminado es abajo. El siguiente estilo se modificará al gradiente correcto, el efecto se muestra a continuación.
div {
fondo: gradiente lineal (a la derecha, # FC0, # F60);
}
Combine las palabras clave de cuatro lados en pares y úselas con para declarar un ángulo. Por ejemplo, arriba a la derecha significa el cuadrante superior derecho. Tenga en cuenta que no es la esquina superior derecha, es decir, la línea de degradado no pasa a través de los dos vértices diagonales del elemento. Como se muestra en la figura a continuación, la línea de gradiente en la parte superior derecha es una línea continua con una flecha en lugar de la línea de puntos.
Además de usar palabras clave, también puede especificar el ángulo en unidades de grados, lo que puede cambiar de forma más intuitiva la dirección de la línea de degradado, como 30 grados.
div {
fondo: gradiente lineal (30deg, # FC0, # F60);
}
3) código de color
Después de especificar la dirección, le seguirá un conjunto de marcas de color separadas por comas, es decir, la posición donde cambia el color. Por ejemplo, coloque # FC0 al 20% de la línea de degradado como se muestra a continuación.
div {
fondo: gradiente lineal (30 grados, # FC0 20%, # F60);
}
Si coloca los dos parches de color en la misma posición, puede producir un efecto de cambio repentino (comúnmente utilizado para lograr rayas), como se muestra en el siguiente código. En la imagen a continuación, la izquierda es una imagen de degradado y la derecha es una imagen nítida.
div {
fondo: gradiente lineal (30 grados, # FC0 20%, # F60 20%);
}
Cuando el tamaño del degradado se establece explícitamente en 0, el efecto de cambio agudo también se puede lograr, el estilo es el siguiente.
div {
fondo: gradiente lineal (30 grados, # FC0 20%, # F60 0);
}
4) Punto de color medio
La función del punto de color medio es modificar el modo de fusión en ambos lados, es decir, definir cómo procede el gradiente entre colores adyacentes. Por defecto, el punto de color medio está en el punto medio entre las posiciones finales de los dos colores.
Tome el siguiente estilo como ejemplo, la transición de amarillo al 20% (# FC0) a naranja al 100% (# F60), el punto medio de los dos es 60%.
div {
fondo: gradiente lineal (30 grados, # FC0 20%, # F60);
}
Al especificar el punto de color medio, debe omitir el color. Como se muestra en el siguiente código, mueva el punto de color medio al 40%. El efecto de gradiente se muestra en el lado derecho de la figura a continuación. El lado izquierdo es el gradiente predeterminado.
div {
fondo: gradiente lineal (30 grados, # FC0 20%, 40%, # F60);
}
Segundo, el gradiente radial
El gradiente radial se irradiará hacia afuera desde un origen, y el área de cobertura puede ser circular o elíptica, que a menudo se usa para focos, ondas de la superficie del agua y otros efectos. Al implementar un gradiente radial, se utiliza la función radial-gradient (), en la que se pueden declarar parámetros como la forma, el tamaño, el punto central, la escala de colores, etc.
1) forma y tamaño
Puede declarar explícitamente la forma del degradado a través de las dos palabras clave círculo o elipse, como se muestra a continuación.
.circle {
fondo: gradiente radial (círculo, # FC0, # F60);
}
.ellipse {
fondo: degradado radial (elipse, # FC0, # F60);
}
En los dos estilos siguientes, cuando se declara un radio, se puede generar un gradiente circular, el efecto está en el lado izquierdo de la figura a continuación; cuando se declaran dos radios diferentes, se puede generar un gradiente elíptico, el efecto está en el lado derecho de la figura a continuación.
.circle {
fondo: gradiente radial (20px, # FC0, # F60);
}
.ellipse {
fondo: gradiente radial (50px 20px, # FC0, # F60);
}
Tenga en cuenta que el radio de un círculo no se puede establecer como un porcentaje, y la elipse sí. El primer radio porcentual de la elipse se refiere al eje horizontal (el ancho de la imagen de fondo), y el segundo se refiere al eje vertical (la altura de la imagen de fondo), como se muestra a continuación.
div {
fondo: gradiente radial (25% 20%, # FC0, # F60);
}
Además de especificar el tamaño del gradiente por longitud y porcentaje, también se admiten cuatro palabras clave, como se muestra en la siguiente tabla, donde la esquina más alejada es el valor predeterminado para los gradientes radiales.
| Palabra clave | Efecto |
| lado más cercano | Cuando se trata de un círculo, el borde degradado se extiende hasta el borde más cercano al punto central de la imagen degradada; cuando se trata de una elipse, el borde degradado se extiende hasta los ejes horizontal y vertical más cercanos al punto central de la imagen degradada |
| lado más alejado | Cuando se trata de un círculo, el borde degradado se extiende hasta el borde más alejado del punto central de la imagen degradada; cuando se trata de una elipse, el borde degradado se extiende hasta el eje horizontal y el eje vertical más alejado del punto central de la imagen degradada. |
| esquina más cercana | El borde degradado toca la esquina más cercana al punto central en la imagen degradada |
| esquina más alejada | El borde degradado toca la esquina de la imagen degradada más alejada del punto central |
En la figura siguiente, las cuatro palabras clave se aplican a círculos y elipses, y las coordenadas del punto central se cambian para facilitar la observación.
2) Punto central
El punto central del área del gradiente se puede establecer en el valor de posición del atributo de posición de fondo, como arriba a la derecha, 30px 50px, etc., pero para distinguir el valor de tamaño del gradiente, debe estar separado por at, como se muestra a continuación.
div {
background: radial-gradient (círculo a 30px 50px, # FC0, # F60);
}
3) rayos de gradiente
A diferencia de los gradientes lineales, el rayo de gradiente de un gradiente radial extenderá innumerables líneas hacia afuera desde el punto central, como se muestra en la siguiente figura. Cuando el gradiente es un círculo, la distancia entre el punto final del rayo gradiente y el punto central es el radio del círculo; cuando el gradiente es una elipse, la distancia entre el punto final del rayo gradiente y el punto central está determinada por el eje horizontal de la elipse.
Tres, repite el gradiente
Tanto los gradientes lineales como los gradientes radiales tienen funciones de repetición correspondientes. El primero es repetición-gradiente-lineal () y el segundo es repetición-gradiente-radial (). El número de repeticiones está determinado por el atributo de tamaño de fondo y el tamaño del elemento. En la figura siguiente, hay dos conjuntos de gradientes (los estilos son los siguientes), donde el lado izquierdo de cada grupo es el efecto del gradiente una vez, y el lado derecho es el efecto de gradientes repetidos.
.linear {
fondo: gradiente lineal (30deg, # FC0, # F60 30px);
}
.repeating-linear {
fondo: gradiente-lineal-repetitivo (30deg, # FC0, # F60 30px);
}
.radial {
fondo: gradiente radial (30px, # FC0, # F60);
}
.repeating-radial {
fondo: gradiente-radial-repetido (30px, # FC0, # F60);
}
Hay muchos usos ingeniosos de gradientes repetidos, como generar un fondo rayado, el estilo es el siguiente y el efecto se muestra en la siguiente figura.
.stripe {
fondo: gradiente lineal repetido (30 grados, transparente, transparente 10px, # F60 0, # F60 20px);
}