Home > Article > Web Front-end > Example introduction of two kinds of gradients in css3

Example introduction of two kinds of gradients in css3

不言Original: 2018-08-09 16:41:033609browse

The content of this article is an introduction to the two types of gradients in CSS3. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

css3
ps: CSS is becoming more and more like a language. CSS already has variables. I just saw it in the document. An experimental feature.

Gradient

Gradient is divided into two kinds of gradients, one is linear gradient and the other is radial gradient

Linear gradient

Linear gradient is upward , two gradient modes: downward, left, and right.

linear-gradient() function

This is a function of css. A linear gradient consists of an axis, the gradient line. Each point on it has two or more colors. Each point on its axis has an independent color. In order to build a smooth gradient, this function also builds a series of shading lines. The color of each shading line also depends on the color point on the gradient line that intersects it perpendicularly.
Example introduction of two kinds of gradients in css3

// 渐变轴45度，重蓝色到红色linear-gradient(45deg, blue, red);

Example introduction of two kinds of gradients in css3

// 从右下到左上，蓝色渐变到红色linear-gradient(to left top, blue, red);

Example introduction of two kinds of gradients in css3

// 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 linear-gradient(0deg, blue, green 40%, red)

ps transparency is the last parameter of rgba

radial gradient

The radial gradient consists of its center point, edge shape, outline, its position, and color value end point.
The radial gradient is composed of ellipses.
Example introduction of two kinds of gradients in css3