How to understand the linear gradient in CSS3

Linear gradients in CSS3

Linear gradient formula:

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

Meaning: (angle deg or locality, one or more gradient color key nodes (multiple words with "," separated));

This type of notation is similar to regular expressions:

[]: Represents a character bit, generally with the "|", which means to select one from [];

|: denotes "or", meaning to choose one from the left and right sides of this symbol.

EG:[1|2], that is to say that this bit is not 1 is 2;

？ : Denotes dispensable, the value range is [0,1];

*: Indicates the optional, the value range is (0,+∞);

+: Indicates at least one, the value range is [1,+∞];

This is a preview in Chrome, so add the-webkit-prefix (for example, red and yellow color)

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

1) Find the center point of the gradient shape to coordinate the origin of the coordinates.

2) starting from 0deg, the angle is positive when the counter-clockwise rotation is formed, the angle is negative when the clockwise rotation is formed.

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

Xx=0 or xx=360, the gradient becomes horizontal from left to right; Eg:background:-webkit-linear-gradient (0deg,red 0,yellow 200px); xx=90 when it becomes vertical from bottom up; eg: Background:-webkit-linear-gradient (90deg,red 0,yellow 200px); xx=180, gradient to horizontal right-to-left; Eg:background:- Webkit-linear-gradient (180deg,red 0,yellow 200px); xx=270, gradually changes vertically from top to bottom; Eg:background:-webkit-linear-gradient (270deg , red 0,yellow 200px);

Legend One:

0<xx<90, the gradient is from bottom left to top right. Eg:beg:ackground:-webkit-linear-gradient (45deg,red 0,yellow 200px); When 90<xx<180, the gradient is 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);

Legend Two:

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

　　The optional values are 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), is used to indicate from the top down, from bottom to top, from left to right, from right to left, from top to bottom, from left to top, from top to bottom, right to left, right to left.

3.color-stop (Gradient key color node)

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

A color value or an English word that represents a color + space + The percentage or length value (px) in which the gradient key is located in the corresponding drawing;

note: here a color value <color> can only correspond to one location [< percentage> | <length>] (Percent is position in two color key nodes percent of the line , the length value is the location and origin of the distance ).