Efficient CSS development practices: CSS 3, LESS, SASS, Bootstrap, Foundation-Reading Notes (3) linear gradient

Efficient CSS development practices: CSS 3, LESS, SASS, Bootstrap, Foundation-Reading Notes (3) linear gradient

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:

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

The result of the above Code is 5.9.

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

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

. 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 right, red, blue);/* The standard syntax should be placed at the end */}

The effect of the above Code is 5.10. After the left/to right parameter is set, the gradient direction changes from top to bottom to from left to right.

<喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + signature/Signature + PC9wPgo8cD69pbHkt73P8ru5v8nS1Mq508O9x7bIwLSx7cq + Signature = "brush: java;">. 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 */}
The effect is 5.11.

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.

Figure 5.12 rainbow color

The rainbow 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);}

Exchange with others