Practical practice of efficient CSS development: CSS 3, LESS, SASS, Bootstrap, Foundation Reading Notes (3) Linear Gradient_html/css_WEB-ITnose

Linear gradient can set 3 parameter values: direction, starting color, and ending color. The simplest mode only requires defining the start and end colors, with the start, end, and direction defaulting from the top to the bottom of the element. The following is an example:

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

The effect of the above code is shown in Figure 5.9.

Figure 5.9 The simplest linear gradient effect

If you want to use some older versions of browsers (except IE), you can If the normal display is as shown in Figure 5.9, you need to add compatible code:

.test {  background:-webkit-linear-gradient(red, blue);             /*webkit核心浏览器兼容代码*/  background:-o-linear-gradient(red, blue);                       /*Opera浏览器兼容代码*/  background:-moz-linear-gradient(red, blue);                 /*Firefox 浏览器兼容代码*/  background:linear-gradient(red, blue);                             /*标准语法要放在最后 */}

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

.test {  background:-webkit-linear-gradient(left, red, blue);      /*webkit核心浏览器兼容代码*/  background:-o-linear-gradient(left, red, blue);                /*Opera浏览器兼容代码*/  background:-moz-linear-gradient(left, red, blue);                   /*Firefox 浏览器兼容代码*/  background:linear-gradient(to right, red, blue);             /*标准语法要放在最后 */}

The effect of the above code is shown in Figure 5.10. After setting the left/to right parameter, the gradient direction changes from top to bottom to left to right. .

Figure 5.10 Specify the starting point

Note: The gradient direction format of standard writing is as "to right" in the above example , use right under Firefox and Opera browsers, and use the starting position left for webkit core browsers.

The gradient direction can also be expressed by angle, 0deg, 90deg, 180deg and 270deg correspond to to top, to right, to bottom and to left respectively, for example:

.test {  background:-webkit-linear-gradient(45deg, red, blue);          /*webkit核心浏览器兼容代码*/  background:-o-linear-gradient(45deg, red, blue);                            /*Opera浏览器兼容代码*/  background:-moz-linear-gradient(45deg, red, blue);             /*Firefox 浏览器兼容代码*/  background:linear-gradient(45deg, red, blue);                       /*标准语法 */}

The effect is shown in Figure 5.11.

Figure 5.11 Specify the gradient direction as 45°

Linear gradient not only supports gradients of two colors, but also Add any color. For example, you can use linear gradient to construct a rainbow effect, as shown in Figure 5.12.

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

Let’s communicate together if you want to learn