Example introduction of two kinds of gradients in css3

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.

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

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

// 从下到上，从蓝色开始渐变、到高度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.

The first parameter

The first parameter can generally be omitted,

closest- side

closest-corner

closest-side

farthest-corner

circle at percentage

Write separately

Percent sign

Recommended related articles:

CSS3 animation properties: Introduction to transform property

CSS3 animation properties: Introduction to the Animation property

The above is the detailed content of Example introduction of two kinds of gradients in css3. For more information, please follow other related articles on the PHP Chinese website!