Linear gradient into the pit linear-gradient

Linear gradient linear-gradient expression:
linear-gradient (? [<Angle> | <Side-or-corner>,] <Color-STOP> [, <Color-STOP>] +);

See linear gradient of expression, have to start with the brain, and spin off would be understandable.
Let's talk about a few actual start of the expression:

background-image:linear-gradient(#62C292 0%,#F8CBAD 100%);
background-image:linear-gradient(0deg,#62C292 0%,#F8CBAD 100%);    
background-image:linear-gradient(top,#62C292 0px,#F8CBAD 100px);
background-image:linear-gradient(90deg,#62C292 0%,#F8CBAD 50%,#62C292 100%);
background-image:linear-gradient(90deg,#62C292 0%,#F8CBAD 25%,#62C292 50%,#F8CBAD 75%,#62C292 100%);

Be understood by the above -
background-Image: Linear-gradient ([angles or corners,] x (0or1) + (length or color space + + percentage) + [(color space + + length or percentage) xn (n > = 1)]);

• [Angles or corners,] * (0or1)
  means

[<angle>|<side-or-corner>,]?

• (Color space + + length or percentage)
  refers to

<color-stop>

• [(Color space + + length or percentage) * n (n> = 1 )]
  means

[, <color-stop>]+

• I have given expression inside the "+" understood as a merger between strings on it

I do not know whether there will be around the halo, from the beginning I was so understandable. In other violence, a simple point -

• "|" Means "or (ie or)"

• "?" Means "0 or 1"

• "+" Means "one or more"

Or to in-depth understanding of the actual case, the following results are based on firefox38.0

The knowledge of the angle of a linear gradient

HTML in the body part -

<div style='width:100px;border:4px solid #3B9768;margin:10px'>
  <p style='margin:5px;font-size:12px;text-align:center;'>0deg</p>
  <div style='height:90px;margin:5px;background-color:transparent;background-image:linear-gradient(0deg,#62C292 0%,#F8CBAD 100%);'></div>
</div>

Successively inside the "0deg" replace "45deg", "90deg", "135deg", "180deg".
The result is -

Linear gradient from the default angle in the vertical direction on the bottom to begin to rotate clockwise.

Second, two or more colors and gradients disturbing <color-stop>

Examples of a plurality of look gradient color.

The figure is a horizontal left to right direction of the gradient, and the total length of the known starting point of the gradation, can be determined eleven <color-stop> position (determined by the length or percentage), in conjunction with the corresponding position on the color may know that a <color-stop> and the next <color-stop> how the occurrence of color gradient.

The total length of the horizontal and vertical well understood intuitively undoubtedly background block width or height. If the angle of the gradient is non-horizontal and vertical, how it determines the total length of the gradient? It is understood by the following FIG.

As shown, the starting point and end point of the gradient in a vertical line through the center line of the gradient, and the gradient direction is given a block, it is possible to determine the starting point and the total length of the gradient, so there are n <color-stop >, can be divided into the n-1 of the transition region.
Example:
the HTML in the body portion -

<div style='width:350px;height:220px;margin:5px;background-color:transparent;background-image:linear-gradient(135deg, #9DC3E6 0%, #F4B183 25%, #C9C9C9 50%, #FFD966 75%, #A9D18E 100%);'></div>

Third, the summary

In fact, linear-gradient does not pit, understand the principles minute of Fun gradient.