线性渐变(linear)

语法：background: linear-gradient(起始方向，颜色1，颜色2…)

起始方向可用角度(deg)，也可用方向（left，right…之类的 【默认为top】)

是否加私有前缀

• 必须加浏览器私有前缀，否则不生效:

background: -webkit-linear-gradient(起始方向，颜色1，颜色2…)

• 但是其实方向可用to + 方向 时，可不加私有前缀

径向渐变(radial)

$若浏览器不显示则加私有前缀$

默认为椭圆 修改为圆只需在最前面加circle即可

普通语法

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

自定义圆心位置的语法结构:

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

自定义形状 圆心位置的径向渐变的语法:

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

自定义径向大小的径向渐变效果:

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

用不同的关键字定义径向渐变

语法：background-image: radial-gradient(关键字 at 60% 55%, red, yellow, black);

关键字：

• closest-side
• farthest-side
• closest-corner
• farthest-corner【默认】

分别加上后的效果：

关键字的具体含义

重复径向渐变(repeating)

线性渐变也可以用： repeating-linear-gradient()

通过repeating-radial-gradient()方法实现

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 其中红色为三种颜色中第一个呈现的颜色 黄色为第二呈现 粉色为第三呈现
因为设置了容器的大小 所以当所有颜色值都使用完之后 仍然没有填满整个容器的话 就会自动返回到第一个颜色值 以此循环 直到填满整个容器
*/

容器的创建，默认是矩形。但是可以使用border-radius方法创建圆形，以此充当容器来存储重复渐变的效果

可以修饰为圆形:

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的方法创建了一个圆形*/