两种或多种颜色间平滑过渡的效果分类： （1）、线性渐变 （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中渐变的相关知识，希望对你有所帮助，觉得可以的话点个赞吧嘻嘻，还有就是让我们一起努力加油吧！
