Summary of radial gradient knowledge points of css background gradient properties

This article brings you relevant knowledge about css, which mainly introduces the related issues of radial gradient. Radial gradient can be understood as a gradient with a radius value, that is, the final The effect is no longer a gradient along a straight axis. The final effect is a circle or oval. Let’s take a look at it. I hope it will be helpful to everyone.

(Learning video sharing: css video tutorial, html video tutorial)

Radial gradient can It is understood that with the gradient of the radius value, the final effect is no longer a gradient along a linear axis. The final effect is a circle or oval. As shown in the figure below, it is a radial gradient effect.

Radial gradient is achieved by using the radial-gradient() method in background. Its syntax structure is similar to linear-gradient, that is, linear gradient. You can also customize the direction value and color value. Because it is radial, you can also set the radius value to achieve size changes

General syntax structure:

background:radial-gradient(red,yellow,pink)

/*这个语法中，只在radial-gradient方法中添加了颜色值 所以其它的参数全部采取默认
方向 采取的默认值是中心的位置 （这里的方向不是指渐变的方向 而是圆心的位置）
形状 采取的默认值是ellipse(椭圆形) 这里只有两个参数 ellipse(椭圆形)和circle(圆形) 默认ellipse
因为是径向渐变 所以颜色的展示是从里到外 如上所示 表示圆心中间显示的是红色 然后往外拓展分别是黄色 粉色
*/

As shown below, it is the final rendering

The grammatical structure of customizing the center position of the circle:

background: radial-gradient(at right bottom,red,yellow,pink)

/*使用 at 来定义最终的圆心位置 at后面可以接代表方向的关键字 也可以使用百分值
默认是先设置水平方向的位置 然后是垂直方向 这里就表示将圆心的位置定义在右下角 
颜色从里到外依次为 red yellow pink
*/

The final rendering is as follows As shown

The syntax of the radial gradient of the center position of the custom shape

background: radial-gradient(circle at 50% 50%, red,yellow,pink)
/*这里表示的就是创建一个圆形 且该圆形的圆心位于水平方向50% 垂直方向50%的位置 即居中
颜色从里到外拓展依次为 red yellow pink
*/

The final rendering is as follows

Radial gradient effect with custom radial size

background: radial-gradient(150px 110px at 50% 50%,red,yellow,pink)
/*这里表示定义了一个水平半径为150px 垂直半径为110px 圆心的位置在水平方向50% 垂直方向50% 即居中
颜色从里到外拓展依次为 red yellow pink
*/

The final rendering is as follows

Note : When writing, please note that the color values ​​are separated by commas. Custom shapes, custom radial sizes and color values ​​are also separated by commas. Before using the gradient effect, you must first define a container to define the container. The width and height will make the effect appear

## The above four are simple radial gradient effects. In addition to this, there are also more complex repeated radial gradients. Effect. Implemented through the repeating-radial-gradient() method

Using this method to achieve a repeating radial gradient effect is similar to the syntax of the ordinary radial gradient effect above, except that it adds the end value of the color on the original basis. Setting, that is, setting how much space the specified element occupies in this container

For example:

width: 300px;
height: 300px;
background: repeating-radial-gradient(circle at 50% 50%, red,red 10px,yellow 10px,yellow 20px,pink 20px,pink 30px);

/*该语法使用repeating-radial-gradient方法 表示创建一个重复的径向渐变
这个重复的径向渐变的形状是圆形 圆心的位置在水平方向50% 垂直方向50%的地方 
设置了三种颜色 red yellow pink 
这三种颜色所占空间都是10px 其中红色为三种颜色中第一个呈现的颜色 黄色为第二呈现 粉色为第三呈现
因为设置了容器的大小 所以当所有颜色值都使用完之后 仍然没有填满整个容器的话 就会自动返回到第一个颜色值 以此循环 直到填满整个容器
*/

The final effect is as shown below

Container creation, the default is rectangular. But you can use the border-radius method to create a circle, which acts as a container to store the effect of repeated gradients

width: 300px;
height: 300px;
border-radius: 50%;
background: repeating-radial-gradient(circle at 50% 50%,red, red 10px,yellow 10px, yellow 20px,pink 20px,pink 30px);

/*如上所示 在之前的基础上定义了容器的形状 使用border-radius的方法创建了一个圆形*/

The final rendering is as follows

Note: If you want to achieve a repeated radial gradient effect, you must define the size and shape of the container, and the color and the space occupied by the color must also be adjusted according to the actual situation. The setting order of color values ​​is the final setting of the final display effect. In the definition, it is from left to right, and in the final effect, it is from inside to outside.

Radial Radial gradients are defined by their center point, edge shape outline and position, and color stops.

When we set multiple colors for a gradient, they will equally divide the 100% area to gradient. Of course, in addition to percentages, we can also use specific pixels to set this size. The size of the pixel setting refers to the distance extending outward from the center of the gradient circle.

Syntax:

background: radial-gradient( [ circle || <length> ] [ at <position> ]? ,| [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,| [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,| at <position> ,<color-stop> [ , <color-stop> ]+ )

position: If missing, defaults to the center point.

shape: The shape of the gradient. Round or oval. The default value is ellipse.

size: The size of the gradient.

#color-stop: Represents a fixed color value at a certain position. The value plus an optional position value. A percentage value of 0%, or a length value of 0, represents the center point of the gradient; a percentage value of 100% represents the point where the gradient ray intersects the edge shape. The percentage values ​​in between correspond linearly to points on the gradient ray.

extent-keyword: keyword is used to describe the specific location of the edge outline. The following are keyword constants:

(Learning video sharing: css video tutorial, html video Tutorial)

The above is the detailed content of Summary of radial gradient knowledge points of css background gradient properties. For more information, please follow other related articles on the PHP Chinese website!