Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this "CSS3 Radial gradient method" article, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "CSS3 Radial gradient method" article.

CSS3 radial gradient

The radial gradient is defined by its center.

In order to create a radial gradient, you must also define at least two color nodes. The color node is the color you want to show a smooth transition. At the same time, you can also specify the center, shape (circle or oval) and size of the gradient. By default, the center of the gradient is center (for the center point), the shape of the gradient is ellipse (for oval), and the size of the gradient is farthest-corner (for the farthest corner).

Grammar

Background-image:radial-gradient (shapesizeatposition,start-color,...,last-color)

Radial gradient-uniform distribution of color nodes (default)

Example

Radial gradient with uniform distribution of color nodes:

# grad {

Background-image: radial-gradient (red, yellow, green)

}

Radial gradient-uneven distribution of color nodes

Example

Radial gradient with uneven distribution of color nodes:

# grad {

Background-image: radial-gradient (red 5%, yellow 15%, green 60%)

}

Set shape

The shape parameter defines the shape. It can be a value of circle or ellipse. Where circle represents a circle and ellipse represents an oval. The default value is ellipse.

Example

A radial gradient with a circular shape:

# grad {

Background-image: radial-gradient (circle, red, yellow, green)

}

The use of keywords of different sizes

The size parameter defines the size of the gradient. It can be the following four values:

Closest-side

Farthest-side

Closest-corner

Farthest-corner

Example

Radial gradient with different size keywords:

# grad1 {

Background-image: radial-gradient (closest-side at 60% 55%, red, yellow, black)

}

# grad2 {

Background-image: radial-gradient (farthest-side at 60% 55%, red, yellow, black)

}

Repeated radial gradient

The repeating-radial-gradient () function is used to repeat the radial gradient:

Example

A repeated radial gradient:

# grad {

Background-image: repeating-radial-gradient (red, yellow 10%, green 15%)

}

The above is the content of this article on "the method of CSS3 Radial gradient". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.