Color linear gradient combat in CSS3

CSS3 Linear gradients can set 3 parameter values: direction, start color, end color. The simplest mode only needs to define the starting and ending colors, the start, end, and direction defaults from the top to bottom of the element. The following examples illustrate:

CSS Code copy content to clipboard

. test{     background:linear-gradient (red, blue);   }  

　　

The effect of the above code.

The simplest linear gradient effect

If you want to display 5.9 of the effect in some older browsers (except IE), you need to add a compatible code:

CSS Code copy content to clipboard

. Test {     background:-webkit-linear-gradient (red, blue);             /*webkit Core Browser compatible code *    /background:-o-linear-gradient (red, blue);                       /*opera Browser Compatible code *    /background:-moz-linear-gradient (red, blue);                 /*firefox Browser Compatible code *    /background:linear-gradient (red, blue);                             /* Standard syntax to be put at the end */  }  

　　

A linear gradient can specify the direction of the gradient, as in the following example:

CSS Code copy content to clipboard

. Test {     background:-webkit-linear-gradient (left, red, blue);      /*webkit Core Browser compatible code *    /Background:-o-linear-gradient (left, red, blue);                /*opera Browser Compatible code *    /Background:-moz-linear-gradient (left, red, blue);                   /*firefox Browser Compatible code *    /Background:linear-gradient (to Rightright, red, blue);             /* Standard syntax to be put at the end */  }  

　　

The effect of the above code, after setting the left/to right parameter, changes the direction of the gradient from top to left.

Specify a starting point

Note: The standard style of the gradient direction format, as in the above example, "to", in the Firefox and Opera browser is right, and for the WebKit Core browser is used to use the start position left.
The gradient direction can also be expressed using an angle of 0deg, 90deg, 180deg, and 270deg corresponding to the to top, to right, to bottom, and to the left, for example:

CSS Code copy content to clipboard

. Test {     background:-webkit-linear-gradient (45deg, red, blue);          /*webkit Core Browser compatible code *    /background:-o-linear-gradient (45deg, red, blue);                            /*opera Browser Compatible code *    /background:-moz-linear-gradient (45deg, red, blue);             /*firefox Browser Compatible code *    /background:linear-gradient (45deg, red, blue);                       /* Standard syntax */  }  

　　

Effect.

Figure 5.11 Specifying a gradient direction of 45°
Linear gradients not only support gradients in two colors, but can also add any color, such as a rainbow effect that can be constructed with a linear gradient, as shown in 5.12.

Rainbow Color

The rainbow Color effect code shown is as follows:

CSS Code copy content to clipboard

. Test {     background:-webkit-linear-gradient (left,red,orange,yellow,green,blue,indigo,violet);     Background:-o-linear-gradient (Left,red,orange,yellow,green,blue,indigo,violet);     Background:-moz-linear-gradient (Left,red,orange,yellow,green,blue,indigo,violet);     Background:linear-gradient (to Rightright, Red,orange,yellow,green,blue,indigo,violet);   }  

　　

Color linear gradient combat in CSS3