En la gramática CSS, el agente de usuario no puede analizar y representar la sintaxis de degradado de degradado sin la línea de degradado. Los gradientes se dividen en gradientes lineales y gradientes radiales.
El degradado crea una imagen de degradado en el área del bloque contenedor correspondiente generado por la propiedad de imagen de fondo en el modelo de cuadro de elemento. La imagen de gradiente lineal se representa de acuerdo con el ángulo de gradiente establecido, la escala de color y otros parámetros.
Específicamente, la línea de gradiente lineal de un elemento es un segmento de línea que pasa por el punto central del modelo de cuadro de elemento. La línea recta está inclinada en un ángulo específico, y la imagen de fondo (imagen de fondo) contiene la esquina superior derecha y la esquina inferior izquierda del área del bloque para formar la línea vertical de la línea recta. Líneas de gradiente
El color de cada punto en la imagen de degradado lineal es el mismo que el de la línea vertical que pasa por la línea de degradado. La intersección de la línea vertical y la línea de degradado tiene el mismo color.
Ejemplos:
Para una explicación concisa y clara, el modo de repetición de fondo: no repetición se adopta aquí. El rectángulo ABCD es el área del cuadro de gradiente de la imagen de fondo del elemento, O es el centro simétrico del rectángulo, la línea L es la línea que pasa por el punto O y el ángulo de inclinación es α, donde α (en el primer y tercer cuadrantes del eje de coordenadas) es un gradiente lineal Ángulo de gradiente (Nota: el ángulo A (en cualquier cuadrante) que define la dirección de la línea de gradiente, 0 grados hacia arriba, y el ángulo positivo significa rotación en el sentido de las agujas del reloj, por lo que el ángulo de gradiente real define que el ángulo de inclinación A sea 90 ° -α.) Sobre B, D Haga la línea vertical de la línea recta L, los pies verticales son D1, B1. El segmento de línea D1B1 es la línea de gradiente calculada por la computadora al renderizar. El color de cualquier punto en el rectángulo ABCD es el mismo que el color del punto de intersección formado por la línea vertical que pasa por este punto como el segmento de línea D1B1. Por ejemplo, D y D1 tienen el mismo valor de color. De manera similar, si α está en el segundo o cuarto cuadrante, use A y C como la línea vertical de L para encontrar la línea de gradiente lineal.
punto inicial-punto inicial; punto final-punto final
(1) La línea de degradado es la categoría de imagen background-image, no la categoría de color background-color.
Este ejemplo ilustra visualmente cómo calcular la línea de gradiente de acuerdo con las reglas anteriores. Esto muestra el inicio y el final de la línea de degradado, y el degradado real generado por el elemento de fondo: "degradado lineal: (45 grados, blanco, negro);".
Tenga en cuenta que aunque los puntos inicial y final no están fuera del cuadro, se encuentran a la derecha, por lo que el gradiente es blanco puro en las esquinas y negro puro en las esquinas opuestas. Esto es intencional y siempre correcto para gradientes lineales.
Nota:
A define el ángulo de la dirección de la línea de gradiente (en cualquier cuadrante), de modo que 0 grados apunten hacia arriba, y un ángulo positivo significa rotación en el sentido de las agujas del reloj,
W el ancho del cuadro de degradado,
H la altura del cuadro de degradado,
abs () devuelve una función de valor absoluto,
La longitud de la línea de degradado (entre el punto inicial y el punto final) es:
abs (W * sin (A)) + abs (H * cos (A))
El código de color del gradiente generalmente se coloca entre el inicio y el final de la línea de gradiente, pero esto no es obligatorio: la línea de gradiente se extiende indefinidamente en ambas direcciones. El punto inicial y el punto final son solo marcas de posición arbitrarias. Cuando el color especificado se detiene, defina el punto inicial de 0%, 0px y otras posiciones, y el punto final define la posición 100%. La parada de color permite la posición antes del 0% o después del 100%.
El color de cualquier punto en un gradiente lineal se determina al encontrar una línea recta que pase por el punto y sea perpendicular a la línea de gradiente. El color de un punto es el color de la línea de degradado en la intersección de la línea.
Prueba de la fórmula para la longitud de la línea de degradado en un degradado lineal:
La prueba se basa en el problema geométrico convertido de la longitud de la línea de gradiente anterior. (Una prueba en el primer cuadrante)
Según el significado de la pregunta: BD = 2OD = √ (DC² + BC²), donde DC = W, BC = H.
∵ sin∠ODD₁ = OD₁ / OD
又 ∵sin∠ODD₁ = sin (∠BDC + 90 ° -α) = cos (α-∠BDC)
∴OD₁ / AT = cos (α-∠BDC)
OD₁ / OD = cosαcos∠BDC + sinαsin∠BDC
OD₁ 即 = AT [cosαcos∠BDC sinαsin∠BDC +]
cos∠BDC = CD / BD, sen∠BDC = BC / BD
OD₁ = ON [cosα * CD / BD + sinα * AC / BD]
= 0.5Wcosα + 0.5Hsinα
Y OD₁ = 0.5D₁B₁
Entonces D₁B₁ = Wcosα + Hsinα
Y A = 90 ° -α
Inmediatamente D₁B₁ = WsinA + HcosA
El gradiente radial es una imagen de gradiente suave dibujada de acuerdo con la información de la escala de colores con el centro de simetría de la elipse de gradiente (o círculo) como punto de partida y el contorno más externo de la elipse (o círculo) como punto final. En términos de efecto, el gradiente radial es un círculo de elipses concéntricas (o círculos) que se escalan en proporciones iguales.
Material de referencia: sitio web oficial del W3C gradiente lineal gradientes lineales
https://www.w3.org/TR/css-images-3/#linear-gradients
"CSS + Secret" versión china P28