1.线性渐变语法：background-image:linear-gradient(direction,color-stop1,color-stop2,...);背景图像：重复线性渐变（方向，颜色停止1，颜色停止2，...）；//重复绘制渐变第一个参数：direction：方向，可选，默认为从上到下第二个参数：start-color：定义起始颜色stop-color：定义结束颜色1.第一个参数当第一个参数为空，默认方向是从上到下。例如：background-image:linear-gradient(#69f,#fd44ff);显示效果为：方向关键字为：tobottom：从上到下toright：从左到右toleft：从右到左totop：从下到上totopleft：从右下到左上到右上角：从左下角到右上角到左下角：从右上角到左下角到右下角：从右下角到左上角例如：背景图像：径向渐变（向右，#69f，#fd44ff）;背景图像：径向渐变（到右上角，#69f，#fd44ff）；代码也可以写成：background-image:radial-gradient(90deg,#69f,#fd44ff);背景图像：径向渐变（45deg，#69f，#fd44ff）；显示效果如下：2、第二个参数第二个参数是color&position，颜色可以是Multiple，每个颜色可以写2个位置的值。每种颜色的位置对应于该颜色的初始过渡色。如：background-image:linear-gradient(#69f20%,#fd44ff);background-image:linear-gradient(#69f50%,#fd44ff);background-image:linear-gradient(#69f20%,#fd44ff80%);background-image:linear-gradient(#69f50%,#fd44ff50%);显示效果为：我们还可以配置多种颜色，配置颜色的起止值，例如：背景图像：线性渐变（#69f25%，#fd44ff50%，#f64f5975%，#fbd786）；背景图像：线性渐变（#69f25%，#fd44ff20%50%，#f64f5950%75%,#fbd78675%);}以上代码效果如下：3.重复渐变重复渐变用于创建一个重复的线性渐变“图像”。使用重复的渐变，我们可以实现加载效果：.loading{margin:100px;宽度：400px；高度：20px；背景：重复线性渐变（45deg，#fff，20%，#00020%40%）；背景大小：20%；边框：实心1px#000；动画：同时运行5s线性无限；}@keyframesrun{0%{background-position:00;}100%{背景位置：100%0；}}像棋盘一样重复线条。.chess{宽度：300px；高度：300px；背景：#eac991；背景图像：重复线性渐变（透明019px，#33320px），重复线性渐变（向右，透明019px，#33320px）；边框：实心3px#333；边界半径：3px；位置：相对；&:after{宽度：15px;高度：15px；位置：绝对；边界半径：50%；'';左：92px；顶部：92px；box-shadow:022px0#000,20px22px0#fff,20px41px0#fff,-20px22px0#fff,-20px41px0#000,41px41px0#000}}地址：https://codepen.io/jianxiujiu...2.径向渐变语法：background-image:radial-gradient(shapesizeatposition,start-color,...,last-color);background-image:repeating-radial-gradient(shape位置大小，开始颜色，...，最后颜色）；第一个参数：shape：shape定义形状（圆形或椭圆），可选，默认为椭圆尺寸：半径大小，可选position：定义中心位置，可选，默认为形状的中心点第二个参数：start-color:定义开始颜色stop-color:定义结束颜色1.第一个参数1.1第一个参数可以忽略。如果为空，则默认为椭圆。圆心为图形的中心，半径为图形对角线的一半。例如：background-image:radial-gradient(#69f,#fd44ff);上面的代码相当于：background-image:radial-gradient(ellipse,#69f,#fd44ff);1.2形状：如果我们想设置成圆形，添加关键字cricle:background-image:radial-gradient(cricle,#69f,#fd44ff);1.3size：写一个参数就是一个圆，写两个参数（参数值不同）就是椭圆：background-image:radial-gradient(100px,#69f,#fd44ff);//半径为100px的圆background-image:radial-gradient(200px100px,#69f,#fd44ff);//长轴200px，短半轴100px的椭圆1.4position：圆心的位置，position的值可以是：atcenter，attop，atright，atbottom，在左边，在左上，在右上，在左下，在右下。例如：background-image:radial-gradient(attop,#69f,#fd44ff);//圆心在顶部背景图像的中间：径向渐变（在右上角，#69f，#fd44ff）；//圆心在右上角的位置如图：圆心的位置也可以是具体的值，上面的代码相当于：background-image:radial-渐变（在150px0，#69f，#fd44ff）；背景图像：径向渐变（300px0，#69f，#fd44ff）；我们还可以指定渐变终点位置（最近边、最近角、最远边、最远角）。closest-side将渐变中心最靠近容器的那一侧作为结束位置。farthest-side从渐变中心到作为结束位置的容器的最远边缘。closest-corner渐变中心离容器最近的角点作为结束位置。farthest-corner从渐变中心到作为结束位置的容器的最远角。如果为空，则默认值为farthest-corner。我们先来看看渐变中心远离容器的边缘作为结束位置的代码和效果（容器大小为200*200）：//以距离容器最近的渐变中心边缘作为结束位置，在本例中为30pxbackground-image:radial-gradient(closest-sidecircleat30px60px,#69f,#fd44ff);//渐变中心到容器的最远边作为结束位置，本例为200px-60px=140pxbackground-image:radial-gradient(farthest-sidecircleat30px60px,#69f,#fd44ff);示例图片如下：渐变中心远离以角为结束位置的容器的代码及效果（容器大小为200*200）：//距离容器最接近渐变中心的角为Endingposition，本例中，Math.sqrt(30*30+60*60)≈67px（勾股定理计算）background-image:radial-gradient(closest-sidecircleat30px60px,#69f,#fd44ff);//离渐变中心最近的容器角作为结束位置。本例中，Math.sqrt(30*30+60*60)≈220px（勾股定理计算）background-image:radial-gradient(farthest-sidecircleat30px60px,#69f,#fd44ff);2.第二个参数第二个参数就像一个线性渐变，就是color&position。可以有多种颜色，每种颜色可以写2个位置的值。例如：背景图像：径向渐变（#69f25%，#fd44ff50%，#f64f5975%，#fbd786）；背景图像：径向渐变（#69f25%，#fd44ff20%50%，#f64f5950%75%,#fbd78675%);显示效果如下：然后来左边和我一起画彩虹~（我真的不会画龙）.rainbow{width:400px;高度：200px；背景图像：径向渐变（在中心底部，透明20%，#cc419c20%25%，#4d81ee25%30%，#03dbda30%35%，#81e74535%40%，#f6fc5e40%45%,#fea80545%50%,#fe685950%55%,透明55%);}效果如下：地址：https://codepen.io/jianxiujiucan/pen/JjdPeGV3.圆锥梯度语法：background-image:conic-gradient(fromangleatposition,start-color,...,last-color)第一个参数：fromangle：起始角度，可选，默认为从上到下position：圆锥点的位置第二个参数：start-color:定义开始颜色stop-color:定义结束颜色1.第一个参数相同，第一个参数可以为空，默认角度为0deg，圆锥中心为形状的中心点。例如：background-image:conic-gradient(#69f,#fd44ff);我们可以改变起始角度，比如：background-image:conic-gradient(from-90deg,#69f,#fd44ff);改变圆锥中心的位置：background-image:conic-gradient(from-90degat80px120px,#69f,#fd44ff)2.第二个参数与线性和径向渐变相同，可以设置颜色和渐变的起始位置。position接受的参数是百分比和角度。例如：background-image:conic-gradient(#69f10%,#fd44ff10%);上面的代码相当于：background-image:conic-gradient(#69f36deg,#fd44ff36deg);显示效果如下：3.RepeatConicalgradients与线性渐变和径向渐变一样，圆锥渐变也具有重复的属性。背景图像：重复圆锥梯度（#69f036deg，#fd44ff36deg72deg）；效果如图：这张渲染图是不是感觉有点眼熟？我们把它设为一个圆圈，加一个按钮，它就是一张彩票盘。效果如下：地址：https://codepen.io/jianxiujiucan/pen/bGddbez我们可以用cones做各种加载效果：地址：https://codepen.io/jianxiujiucan/pen/bGdGyKN第二次加载请自己研究写练习~我们可以用渐变画出各种效果。例如字母：https://codepen.io/jianxiujiucan/pen/gOppOdP
