


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() methodUsing 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 containerFor 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
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.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.
size: The size of the gradient.
#color-stop: Represents a fixed color value at a certain position. The
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!

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

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

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

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

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

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

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


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

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 latest version

Notepad++7.3.1
Easy-to-use and free code editor

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

Dreamweaver CS6
Visual web development tools
