CSS3: linear-gradient, linear gradient method using

CSS3 Gradient (gradients) allows you to display a smooth transition between two or more specified colors. Previously, you have to use images to achieve these effects through the use of CSS3 gradient (gradients) can be realized now. In addition, elements gradient look better when enlarged, because the gradient (gradient) is generated by the browser.

This article only describes the syntax table registration, in order to be compatible with more browsers can go online to search out a lot of solutions, consistent logic.

1. Grammar

background: linear-gradient(direction, color-stop1, color-stop2, ...);

direction: The default is to bottom, i.e. from top to bottom gradient;

stop: the position of the color distribution, the default uniform distribution, for example, three colors, each color stop are 33.33%.

2.示例：to left、top right、to bottom、to top

div { background:linear-gradient(to left, red , blue) }
div { background:linear-gradient(to right, red , blue) }
div { background:linear-gradient(to bottom, red , blue) } /* 浏览器默认值 */
div { background:linear-gradient(to top, red , blue) }

Generate "right to left", "left to right", "down", "bottom-up" of the "red - green" gradient, to the following figure:

  

3.示例：to right bottom、top right top、top left bottom、top left top

div { background: linear-gradient(to right bottom, red , blue); }
div { background: linear-gradient(to right top, red , blue); }
div { background: linear-gradient(to left bottom, red , blue); }
div { background: linear-gradient(to left top, red , blue); }

To generate "bottom right", "top right", "bottom left", "upper left corner" gradient, results as shown:

 

Note: top right bottom and top bottom right is equivalent

4. Use angle

div { background: linear-gradient(10deg, red, blue) }

Results as shown:

The plurality of gradient points

Default plurality of points evenly distributed gradient 5.1

div { background: linear-gradient(to right, red, blue, green) }

Gradient theoretically unlimited number of points, the actual results as shown below:

A plurality of unevenly distributed points 5.2 Gradient

div { background: linear-gradient(red 5%, green 15%, blue 60%) }

6. Repeatability gradient

div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }

10% Yellow location, location 20% green, and then repeat this 20% down follow, to the following figure:

7. Use rgba

div { background:linear-gradient(to right, rgba(255, 0 ,0, 1), rgba(255, 0 ,0 , 0)) }

Red from opaque to transparent is gradual, the effect is as follows:

Reference article: CSS3 gradient (Gradients) , CSS3 Gradient_gradient, CSS3 attributes Detailed

Reproduced in: https: //www.cnblogs.com/rainman/p/5113242.html