优秀程序员Web前端教程CSS3渐变，CSS3渐变（gradient）可以让你在两种或多种指定颜色之间显示平滑过渡。以前，您必须使用图像来实现这些效果，现在可以通过使用CSS3渐变（gradients）来实现。此外，具有渐变的元素在放大时看起来更好，因为渐变是由浏览器生成的。1.线性渐变语法：background:linear-gradient(direction,color-stop1,color-stop2,...);说明：direction：默认为tobottom，即从上到下的渐变；stop：颜色的分布位置，默认均匀分布，比如有3种颜色，每种颜色的stop为33.33%。示例1：到左、右上、到下、到topdiv{background:linear-gradient(toleft,red,blue)}div{background:linear-gradient(toright,red,blue)}div{background:linear-gradient(tobottom,red,blue)}/浏览器默认值/div{background:linear-gradient(totop,red,blue)}产生“从右到左”，“从左到右”，“”红-绿"渐变从上到下，从下到上示例2：到右下，到右上，到左下，到左topdiv{background:linear-gradient(torightbottom,red,blue);}div{background:线性渐变（到右上，红色，蓝色）；}div{背景：线性渐变（到左下，红色，蓝色）;}div{背景：线性渐变（到左上，红色，蓝色）;}分别产生“右下”、“右上”、“左下”、“左上”的渐变示例3：使用角度渐变div{background:linear-gradient(10deg,red,blue)}2.径向渐变Radial渐变不同于线性渐变，线性渐变是颜色从“一个方向”到“另一个方向”的渐变，而径向渐变是颜色从“一个点”到周围的渐变语法：background:radial-gradient(center,shape,大小,开始颜色,...,最后颜色);说明：center：渐变起点的位置，可以是百分比，默认为图形的中心。shape：渐变的形状，ellipse表示椭圆，circle表示圆形。默认为椭圆。如果元素形状是正方形元素，椭圆和圆形将显示相同。size：渐变的大小，即渐变停止的地方，有四个值。closest-side：最近的边；farthest-side：最远的一边；closest-corner：最近的角；farthest-corner：最远的角点示例1：多色点均匀分布div{background:radial-gradient(red,green,blue);}从中心（50%50%）开始，到最远的角（farthest-corner），从红到绿均匀渐变，蓝色EG:div{background:-webkit-radial-gradient(50%50%,farthest-角落，红色，绿色，蓝色）；}或div{background:-webkit-radial-gradient(center,farthest-corner,red,green,blue);}示例2：多色节点分布不均div{background:radial-gradient(red5%,green15%,blue60%);}例3：设置渐变形状div{background:radial-gradient(circle,red,yellow,green);}div{背景：径向渐变（椭圆、红色、黄色、绿色）；}circle：向最大的圆圈渐变；ellipse：根据元素的形状进行渐变，元素为正方形，显示效果与圆形相同。示例4：不同大小的渐变size指定渐变的大小，即渐变停止的位置，它有四个值。closest-side：最近的边；farthest-side：最远的一边；closest-corner：最近的角；farthest-corner:最远的角div{background:radial-gradient(60%40%,closest-side,blue,green,yellow,black);}div{背景：径向渐变（60%40%，最远侧，蓝色，绿色，黄色，黑色）；}div{背景：径向渐变（60%40%，最近角，蓝色，绿色，黄色，黑色）；}div{背景：径向渐变（60%40%，最远角，蓝色，绿色，黄色，黑色）；}3、重复渐变（1）重复线性渐变div{background:repeating-linear-gradient(red,yellow10%,green20%);}解释：10%的位置是黄色，20%的位置是绿色，然后按照这个20%向下重复（2）渐变div的重复路径{background:repeating-radial-gradient(red,yellow10%,绿色20%);}
