Introduction to two examples of gradients in CSS3

This article brings you the content is about the two CSS3 in the example of the introduction of a certain reference value, there is a need for friends to refer to, I hope to help you.

Css3
Ps:css more and more real like a language, CSS already has variables, just see the document. A function of experimental nature.

Gradient

Gradients are divided into two gradients, a linear gradient and a radial gradient

Linear gradient

The linear gradient is up, down, left, and right in both ways.

Linear-gradient () function

This is a function of CSS. A linear gradient consists of one axis, or gradient line. Each point on it has two or more colors. Each point on its axis has a separate color. To build a smooth gradient, the function also constructs a series of shading lines. The color of each shading line also depends on the color point on the gradient line that intersects it vertically.

Gradient axis 45 degrees, heavy blue to red linear-gradient (45deg, blue, red);

From lower right to upper left, the blue gradient to the red linear-gradient (to top, blue, red);

From bottom to top, beginning with blue gradient, to height 40% position is green gradient start, end with red ending linear-gradient (0deg, blue, green 40%, red)

PS transparency is the last parameter of RGBA

Radial gradient

A radial gradient consists of its center point, edge shape, outline, its position, and the end point of the color value.
The radial gradient is made up of the ellipse continuously.

First parameter

The first parameter is generally saved,

Closest-side

Closest-corner

Closest-side

Farthest-corner

Circle at percent

Write separately

Percent Sign