Color linear gradient practices in CSS3 and css3 linear gradient practices

Color linear gradient practices in CSS3 and css3 linear gradient practices

Css3 linear gradient can be set with three parameter values: direction, start color, and end color. In the simplest mode, you only need to define the start color and end color. The start, end, and direction are from the top to the bottom of the element by default. The following is an example:

Copy the content to the clipboard using CSS Code.

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

　　

The effect of the above Code.

Simplest linear gradient effect

If you want to display the 5.9 Effect in some earlier versions of browsers (except IE), you need to add the compatible code:

Copy the content to the clipboard using CSS Code.

. Test {background:-webkit-linear-gradient (red, blue);/* Core webkit 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 ); /* The standard syntax should be placed at the end */}

　　

Linear gradient can specify the gradient direction, as shown in the following example:

Copy the content to the clipboard using CSS Code.

. Test {background:-webkit-linear-gradient (left, red, blue);/* Core webkit browser compatible Code */background:-o-linear-gradient (left, red, blue);/* operabrowser compatible Code */background:-moz-linear-gradient (left, red, blue);/* Firefox browser compatible Code */background: linear-gradient (to rightright, red, blue);/* The standard syntax should be placed at the end */}

　　

After the left/to right parameter is set, the gradient direction changes from top to bottom to from left to right.

Specify start point

Note: The standard Gradient Direction format is "to right" in the preceding example. right is used in Firefox and operabrowser, while left is used for webkit core browsers.
The gradient direction can also be indicated by angle. 0deg, 90deg, 180deg, and 270deg correspond to top, to right, to bottom, and to left, respectively. For example:

Copy the content to the clipboard using CSS Code.

. Test {background:-webkit-linear-gradient (45deg, red, blue);/* Core webkit browser compatible Code */background:-o-linear-gradient (45deg, red, blue);/* operabrowser 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 specify the gradient direction to 45 °
Linear gradient not only supports gradient of two colors, but also can add any color. For example, you can use linear gradient to construct a rainbow effect, as shown in Figure 5.12.

Rainbow color

The rainbow effect code is as follows:

Copy the content to the clipboard using CSS Code.

.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);   }