CSS Efficient development Combat: CSS 3, less, SASS, Bootstrap, Foundation--Reading notes (3) linear gradient

A linear gradient 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:

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

The above code is shown in effect 5.9.

Figure 5.9 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:

. 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:

. 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 right, red, blue);             /* Standard syntax to be put at the end */}

As shown in effect 5.10 of the above code, when the left/to right parameter is set, the gradient direction changes from top to bottom from left to right.

Figure 5.10 Specifying 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:

. 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 */}

As shown in effect 5.11.

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.

Fig. 5.12 Rainbow Color

The rainbow Color effect code shown in Figure 5.12 is as follows:

. 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 right, red,orange,yellow,green,blue,indigo,violet);}

Have a learning to communicate together

CSS Efficient development Combat: CSS 3, less, SASS, Bootstrap, Foundation--Reading notes (3) linear gradient