Deep understanding of linear gradient in css3 and deep understanding of css3 gradient

Deep understanding of linear gradient in css3 and deep understanding of css3 gradient
Linear Gradient in css3Linear gradient formula:

Background-image: linear-gradient ([<angle >|< side-or-corner>]?, <Color-stop> [, <color-stop>] + );

(Angle deg or acronyms, one or more gradient color key nodes (separated ));

This method is similar to a regular expression:

[]: Represents a character bit. It is generally used with "|" to select a character from;

|: Indicates "or", which means to select either of the two sides of this symbol.

Eg: [1 | 2], indicating that the bit is neither 1 nor 2;

 

? : Indicates dispensable. The value range is [0, 1].

*: Indicates dispensable. The value range is (0, + ∞ );

+: Indicates at least one of them. The value range is [1, + ∞].

 

This article uses the Chrome browser for preview, so the prefix-webkit-is added (take the red and yellow colors as an example)

1. angle is the gradient angle, expressed as xxdeg.

 

1) locate the center of the gradient image and use this as the coordinate point for the coordinate system.

2) starting from 0deg, the angle of the clockwise rotation is positive, and the angle of the clockwise rotation is negative.

3) the gradient trend is the same as the direction of the rays formed after a certain angle of rotation.

 

When xx = 0 or xx = 360, the gradient is horizontal from left to right;

Eg: background:-webkit-linear-gradient (0deg, red 0, yellow 200px );

When xx = 90, the gradient is vertical from bottom up;

Eg: background:-webkit-linear-gradient (90deg, red 0, yellow 200px );

When xx = 180, the gradient is horizontal from right to left;

Eg: background:-webkit-linear-gradient (180deg, red 0, yellow 200px );

When xx = 270, the gradient is vertical from top to bottom;

Eg: background:-webkit-linear-gradient (270deg, red 0, yellow 200px );

Example 1:

0 <xx <90, gradient from bottom left to top right.

Eg: beg: ackground:-webkit-linear-gradient (45deg, red 0, yellow 200px );

90 <xx <180, gradient from bottom right to top left.

Eg: background:-webkit-linear-gradient (135deg, red 0, yellow 200px );

180 <xx <270, gradient from top right to bottom left.

Eg: background:-webkit-linear-gradient (225deg, red 0, yellow 200px );

270 <xx <360, gradient from top left to bottom right.

Eg: background:-webkit-linear-gradient (315deg, red 0, yellow 200px );

Example 2:

 

2. side-or-corner (side or corner)

Optional values include top (270deg or-90deg), bottom (90deg), left (0deg), right (180deg), left top (315deg or-45deg), left bottom (45deg), right top (225deg or-135deg), right bottom (135deg ), it indicates the top-down, bottom-up, left-to-right, right-to-left, top-to-right, top-to-right, top-to-left, top-to-bottom-to-right, top-to-left, and top-to-left.

 

3. color-stop (gradient Key color node)

Formula: <color> [<percentage >|< length>]

Meaning: The color value or the English word indicating the color + space + the percentage or length of the position of the gradient key in the corresponding graph (px );

Note: Here, a color value <color> can only correspond to one location [<percentage> | <length>] (the percentage is the percentage of the link at the two key color nodes, the length value is the distance between the position and the origin ).