css渐变

一、渐变

1、什么渐变

两种或多种颜色间平滑过渡的效果分类：
（1）、线性渐变
（2）、径向渐变
（3）、重复渐变

2、渐变的组成（元素）

色标：决定了渐变的每种颜色及其出现的位置每一种渐变效果都是由多个色标组成的(两个及两个以上）

3、渐变的语法

1、先说一下它的语法：
它的属性为： background- image
取值为：
linear-gradient() ：线性渐变
radial-gradient( ) ：径向渐变
repeating- linear-gradient()：重复线性
repeating-radial-gradient()：重复径向
2、线性渐变
它的语法：
background- image ： linear-gradient(angle, co1or- point, co1or-point…）；
angle：方向或角度-即渐变的填充方向。
它的取值为：
关键字：
to top：从下向上填充。
to right：从左向右填充。
to bottom：从上向下填充。
to left：从右向左填充。
注意：取值的中间要用空格隔开
角度：0deg~360deg；
0deg ：to top
90deg ： to right
180deg ： to bottom
270deg ：to left
可以这么理解：

然后我们说一下color-point ：色标，表示每个颜色值，及其出现的位置，多个色标之间用"，“号分隔。
ex ：
1、red 0%
开始的时候是红色。
2、blue 50px
填充到第50像素时，变为蓝色。
3、色标的位置可以省略
省略位置后，每个将平均分配元素区域。
还是要注意：中间空格隔开
举个"栗子”：


3、径向渐变
语法为:：background- image：radial-gradient(size at position，color-point，color-point…)；
size at position：径向渐变的半径以及圆心的位置。
size：圆的半径，px为单位。
position：圆心位置。
1、0px 0px
将圆心设置在元素的左上角。
2、50% 50%
将圆心设置在元素的中间位置处
3、right bottom
关键字：top /right / bottom / left/ center
将圆心设置在元素的右下角
注意：语法中的at不可以不写
注意：两个数值中间用空格隔开
举个例子：

[^1]：好了这就是css中渐变的相关知识，希望对你有所帮助，觉得可以的话点个赞吧嘻嘻，还有就是让我们一起努力加油吧！