search
HomeWeb Front-endCSS TutorialSummary 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.

Summary of radial gradient knowledge points of css background gradient properties

(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.

Summary of radial gradient knowledge points of css background gradient properties

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.

Summary of radial gradient knowledge points of css background gradient properties

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.

Summary of radial gradient knowledge points of css background gradient properties

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

Summary of radial gradient knowledge points of css background gradient properties

size: The size of the gradient.

Summary of radial gradient knowledge points of css background gradient properties

#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.

Summary of radial gradient knowledge points of css background gradient properties

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

Summary of radial gradient knowledge points of css background gradient properties

Summary of radial gradient knowledge points of css background gradient properties

(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!

Statement
This article is reproduced at:CSDN. If there is any infringement, please contact admin@php.cn delete
利用CSS怎么创建渐变色边框?5种方法分享利用CSS怎么创建渐变色边框?5种方法分享Oct 13, 2021 am 10:19 AM

利用CSS怎么创建渐变色边框?下面本篇文章给大家分享CSS实现渐变色边框的5种方法,希望对大家有所帮助!

css ul标签怎么去掉圆点css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

css与xml的区别是什么css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

rtl在css是什么意思rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

css怎么实现英文小写转为大写css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

css怎么设置i不是斜体css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

怎么设置rotate在css3的旋转中心点怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM

在css3中,可以用“transform-origin”属性设置rotate的旋转中心点,该属性可更改转换元素的位置,第一个参数设置x轴的旋转位置,第二个参数设置y轴旋转位置,语法为“transform-origin:x轴位置 y轴位置”。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools