这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战
CSS 的渐变效果是属于background-image的属性值
其中包括三种渐变方式，分别为：
linear-gradient（线性渐变）radial-gradient（径向渐变）conic-gradient（角向渐变）
1. linear-gradient（线性渐变）
background-image: linear-gradient( [<angle> | to <corner>]? , <color-list>... )
angle: 渐变角度（选填），渐变方向为顺时针corner: 渐变方向（选填），接受top，bottom，left，right，left top，left bottom，top right，bottom right8 种值color-list: 要渐变的颜色块（多个） 例如：
background: linear-gradient(135deg,#2b5876,#4e4376); /* 渐变角度 135deg, 渐变色 #2b5876 - #4e4376 */
得到的结果：
水
角度在不设置的情况，默认为to bottom，即和180deg相同效果
一个渐变色块color-item，可以分成三部分
color: 当前位置的颜色percentage: 当前颜色在渐变中所占比例（选填）length: 当前颜色在渐变中的长度（选填）
例如：
可以制作一些十分好看的效果
还有一种可进行重复的线性渐变：
background-image: repeating-linear-gradient(45deg, red, blue);
可以进行重复的线性渐变
2. radial-gradient（径向渐变）
background-image: radial-gradient(shape size at position, color-list...);
shape: 确定圆的类型，分为ellipse（默认）椭圆形和circle圆形size: 渐变大小，值可能为：arthest-corner: 默认，指定径向渐变的半径长度为从圆心到离圆心最远的角closest-side: 指定径向渐变的半径长度为从圆心到离圆心最近的边closest-corner: 指定径向渐变的半径长度为从圆心到离圆心最近的角farthese-side: 指定径向渐变的半径长度为从圆心到离圆心最远的边
position: 定义渐变的圆心位置，值可能为：center: 默认，从中间为圆心top: 设置顶部为圆心bottom: 设置底部为圆心 也可设置百分比（从左上角开始计算）来确定圆心
color-list: 渐变色的色彩列表，每个色块可以看作一个color-item，包含了两个值<color, [size]>color: 当前渐变的颜色size: 当前渐变色所占大小
例如：
background-image: radial-gradient( #E94E65, #1574A8);
就会得到
了
3. conic-gradient（角向渐变）
注意：请在高版本的chrome中使用
看看他最常用的api：
background: conic-gradient(deeppink, yellowgreen);
得到结果:
一
是往一个方向进行旋转渐变（默认顺时针）
同样，渐变色列表中每个色块都可以看作一个color-item，包含了两种值<color, size>
color: 当前渐变色的颜色size: 当前渐变色所占比例（百分比或固定大小） 例如：
background-image: conic-gradient(deeppink 0, deeppink 30%, yellowgreen 30%, yellowgreen 70%, teal 70%, teal 100%);
border-radius: 50%;
width: 200px;
height: 200px;
得到：
这里表示：
- 0-30% 的区间使用
- deeppink0-70% 的区间使用
- yellowgreen0-100% 的区间使用 teal
当你想进行重复的角向渐变的时候，可以使用repeating-conic-gradient进行
background: repeating-conic-gradient(deeppink 0 15deg, yellowgreen 0 30deg);
得到效果：
篇
有什么问题希望大家可以在评论区指出，我及时纠正。（狗头）
新人上路，还请多多包含。
我是MoonLight，一个初出茅庐的小前端。
