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

This article mainly introduces the use of radial-gradient () in css, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

There are two types of gradients that can be defined in css:

1. Linear gradient (LinearGradients)-down / up / left / right / diagonal

2. Radial gradients (RadialGradients)-defined by their center

What can we do with linear-gradient () in the previous article [css]? The use of the linear gradient linear-gradient () attribute is already covered in linear-gradient () details, so I won't cover it here. Let's take a closer look at the use of the radial gradient-- the radial-gradient () attribute.

In radial gradients, instead of fading smoothly from one side of the gradient box to the other as linear gradients do, they appear from a single point and extend smoothly outward in a circular or oval shape.

Radial-gradient () specifies a radial gradient by indicating the size and shape of the center of the gradient (where the 0% ellipse will be) and the end shape (100% ellipse). Color stops are given as a list, which is the same as linear-gradient (). Starting at the center of the gradient, moving toward (and possibly beyond) the end shape, stops drawing and shading a uniformly scaled concentric ellipse based on the specified color.

The basic syntax of the radial-gradient () attribute

The radial gradient syntax is:

Radial-gradient ([| |] [at],)

For example:

Background:radial-gradient (5m circle to pleft)

A circular radial gradient with 5em width is defined, and its center is in the upper left corner.

1.jpg

The parameters are analyzed as follows:

:

Determine the center of the gradient, which can be omitted, but if this parameter is omitted, it is centered by default.

:

You can set two values: circle (circle) or ellipse (oval); determine whether the end shape of the gradient is round or oval, which can be omitted.

:

Determines the size of the end shape of the gradient. If omitted, the default is "farthest-corner". It can be given explicitly by keyword. For keyword definition purposes, think of the edge of the gradient box as an infinite extension in both directions, rather than a finite segment.

If the end shape is oval, its axis is aligned with the horizontal and vertical axes.

Accept the following keywords as their parameter values when defined as gradients of circles and ellipses:

Closest-side: the size of the end shape makes the side gradient box that it fits closest to the center of the gradient. If the shape is oval, it happens to intersect the nearest side of each size.

Farthest-side: same as closest-side, except that the size of the final shape is based on the farthest side.

Closest-corner: the size of the end shape makes the corner gradient box it passes through closest to the center of the gradient. If the shape is oval, the end shape given has the same aspect ratio as when the nearest side is specified.

Farthest-corner: same as closest-corner, except that the size of the final shape is based on the farthest corner. If the shape is oval, the aspect ratio of the end shape is the same as when the outermost side is specified.

Note:

1. If specified as "circle" or omitted, you can explicitly give:

The radius of the circle is clearly given, and the negative value is not valid.

Percentages are not allowed here; they can only be used to specify the size of the elliptical gradient, not the size of the circular gradient.

2. If it is to be specified as "ellipse" or omitted, it can be explicitly specified as:

{2}:

The size of the ellipse is clearly given. The first value represents the horizontal radius and the second value represents the vertical radius. The percentage value is relative to the corresponding dimension of the gradient box. A negative value is not valid.

Radial gradient exampl

Example 1: different methods for specifying basic radial gradients

Radial-gradient (yellow,green)

Radial-gradient (ellipseatcenter,yellow0%,green100%)

Radial-gradient (farthest-cornerat50%50%,yellow,green)

Thank you for reading this article carefully. I hope the article "what is the use of radial-gradient () in css" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.