In the CSS grammar, the user agent cannot analyze and render the gradient gradient syntax without the gradient line. Gradients are divided into linear gradients and radial gradients.
The gradient creates a gradient image in the corresponding containing block area generated by the background-image property in the element box model. The linear gradient image is rendered according to the set gradient angle, color scale and other parameters.
Specifically, the linear gradient line of an element is a line segment passing through the center point of the element box model. The straight line is inclined at a specified angle, and the background image (background-image) contains the upper right corner and the lower left corner of the block area as the vertical line of the straight line. The line segment composed of the intersection of the two vertical lines and the straight line is the linear gradient image of the element Gradient lines.
The color of each point in the linear gradient image is the same as the vertical line passing through the gradient line. The intersection of the vertical line and the gradient line has the same color.
Examples:
For concise and clear explanation, the background-repeat: no-repeat mode is adopted here. The rectangle ABCD is the gradient frame area of the element background image, O is the symmetric center of the rectangle, the line L is the line passing through the point O and the inclination angle is α, where α (in the first and third quadrants of the coordinate axis) is a linear gradient Gradient angle. (Note: The angle A (in any quadrant) that defines the direction of the gradient line, 0 degrees points upward, and the positive angle means clockwise rotation, so the actual gradient angle defines the tilt angle A to be 90 ° -α.) Over B, D Make the vertical line of the straight line L, the vertical feet are D1, B1. Line segment D1B1 is the gradient line calculated by the computer when rendering. The color of any point in the rectangle ABCD is the same as the color of the point of intersection formed by the vertical line passing through the point D1B1. For example, D and D1 have the same color value. Similarly, if α is in the second or fourth quadrant, then use A and C as the vertical line of L to find the linear gradient line.
starting point-starting point; ending point-end point
(1) The gradient line is the image category background-image, not the color category background-color.
This example visually illustrates how to calculate the gradient line according to the above rules. This shows the start and end of the gradient line, and the actual gradient generated by the background element: "linear-gradient: (45deg, white, black);".
Note that although the start and end points are not outside the frame, they are located on the right side, so the gradient is pure white at the corners and pure black at the opposite corners. This is intentional and always correct for linear gradients.
note:
A defines the angle of the gradient line direction (in any quadrant), so that 0 degrees points upward, and positive angle means clockwise rotation,
W the width of the gradient box,
H the height of the gradient box,
abs () returns a function of absolute value,
The length of the gradient line (between the start point and the end point) is:
abs(W*sin(A))+abs(H*cos(A))
The color code of the gradient is usually placed between the start and end of the gradient line, but this is not required: the gradient line extends indefinitely in both directions. The start point and end point are just arbitrary position marks. When the specified color stops, define the start point of 0%, 0px and other positions, and the end point defines 100% position. Color stop allows position before 0% or after 100%.
The color of any point on a linear gradient is determined by finding a straight line that passes through the point and is perpendicular to the gradient line. The color of a point is the color of the gradient line at the intersection of the line.
Proof of the formula for the length of the gradient line in a linear gradient:
The proof is based on the geometric problem converted from the length of the gradient line above. (A proof in the first quadrant)
According to the meaning of the question: BD = 2OD = √ (DC² + BC²), where 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,sin∠BDC=BC/BD
OD₁ = ON [cosα * CD / BD + sinα * BC / BD]
=0.5Wcosα+0.5Hsinα
And OD₁ = 0.5D₁B₁
Then D₁B₁ = Wcosα + Hsinα
And A = 90 ° -α
Immediately D₁B₁ = WsinA + HcosA
The radial gradient is a smooth gradient image drawn according to the color scale information with the center of symmetry of the gradient ellipse (or circle) as the starting point and the outermost contour of the ellipse (or circle) as the end point. In terms of effect, the radial gradient is a circle of concentric ellipses (or circles) that are scaled in equal proportions.
Reference material: W3C official website linear gradient linear-gradients
https://www.w3.org/TR/css-images-3/#linear-gradients
"CSS + Secret" Chinese version P28