Linear gradient of CSS3 (linear-gradient)

Take webkit kernel browser as an example

Syntax:

Div {width:200px; height:200px; background:-webkit-linear-gradient (left,#F39,#09C);}

As shown in the figure:

Parameters:

-webkit-linear-gradient is the webkit engine's implementation parameter for gradients. The first parameter controls the direction of the gradient, such as left (from left to right) right (from right to left). The second and third parameters are the color from beginning to end, respectively.

The start and end color is along the gradient line and will contain points of the specified color at the specified location (set as a percentage or length). The number of starts and stops of color is infinite. If you use a percentage position, 0% represents the starting point and 100% is the end point, but values outside the area can be used to achieve the desired results. This is also a key to making gradients through CSS3 Gradient, which directly affects your design effect, like our examples here are not perfect effects, just to show you a gradient effect, we first use it. Let's go on to look at examples of different starting colors:

Div {width:200px; height:200px; background:-webkit-linear-gradient (left,#F39 90% meme 09C);}

As shown in the picture

You are welcome to discuss the usage in more detail.