css3的渐变属性已经广泛应用于各种网页设计中。在css3的gradient属性之前，你可能别无选择，只能实现一些各种颜色切换的效果图。使用图片来展示，虽然知道使用图片需要网络请求，既消耗带宽又消耗时间。下面我将介绍使用CSS3渐变来改善这个问题。linear-gradient的基本用法如果想知道linear-gradient有什么用，当然要先了解它的属性和用法。让我们首先了解线性渐变的属性。线性渐变（[[[|to[top|bottom]||[left|right]],]?[,]+);第一个linear-gradientfunction一个参数是角度或者方向，第二个参数是截止颜色的值。要产生渐变效果，当然至少需要两个以上的色值。先来看一个简单的例子：div{width:100px;高度：100px；background:linear-gradient(white,gray);}如上图创建一个100*100的正方形，从上到下线性渐变，从白到灰过渡。linear-gradient不传position参数时，默认为从上到下的线性渐变。让我们看一个带有位置信息的渐变示例：div{width:100px;高度：100px；background:linear-gradient(toright,white,gray);}通过在key上加上position来传递位置信息，表示颜色渐变的方向。上面表示从左到右的颜色渐变。角落渐变怎么样？很简单，linear-gradient(torighttop,white,gray)就可以了，那么入射角怎么线性渐变呢？让我们看一个例子：div{width:100px;高度：100px；background:linear-gradient(0deg,white,gray);}这个角度指的是什么？在新标准中，0deg指向北方并顺时针增加。因此，上图中输入角度为0deg时，渐变是从下往上进行的。有时候你可能不想让渐变从一开始就出现，而是想在指定位置开始渐变，怎么办？让我们看一个例子：div{width:100px;高度：100px；background:linear-gradient(90deg,red,red80%,gray);}我们在中间我们想要渐变开始的地方添加一个颜色值相同的颜色点，和上面一样，在80%的位置，梯度重复线性梯度是什么函数？该函数的使用参数与linear-gradient完全相同，但它会在各个方向重复渐变，以覆盖其整个容器。不明白什么意思？只看一个例子：div{width:100px;高度：100px；背景图像：重复线性渐变（180deg，rgb（26,198,204），rgb（26,198,204）7％，rgb（100,100,100）10％）;}看完例子，一目了然。它从7%的位置开始变化，逐渐变化到10%的位置，然后重复简单的用法（方格图案）。实现了吗？看具体样式：div{width:100px;高度：100px；背景：白色；背景图像：线性渐变（90deg，rgba（200,0,0,0.5）50％，透明0），线性渐变（rgba（200,0,0,0.5）50％，透明0）;background-size:30px30px;}代码是不是很简单？其实就是用background-image属性先竖着画一个30*30的格子，像右渐变一样，在50%的地方逐渐变成透明色，然后再横着画，向下渐变，逐渐变成在50%的地方一个透明色，然后叠加，是不是很简单？自己去试试吧！径向渐变的基本用法径向渐变用于显示从原点（渐变的中心）辐射的颜色渐变。我们来看看radial-gradient的基本语法：radial-gradient([circle||][at]?,|[ellipse||[|]{2}][在]?,|[[circle|ellipse]||][在]?,|在,[,]+)position：类似于background-position或者transform-origin的值，如果不是，则取中心点的值，包括一个值加上一个可选的position值extent-keyword：用来描述具体的位置edgecontour，其取值：closest-side（离容器最靠近渐变中心的边作为结束位置），closest-corner（离渐变中心最近的角作为结束位置），farthest-side（从渐变中心到容器最远的边作为结束位置），farthest-corner（从渐变中心到容器最远的角作为结束位置）介绍完基本概念后，le看一个例子：div{width:100px;高度：100px；background-image:radial-gradient(red,green);}上面的例子是最简单的径向渐变，所有的值都是默认值，渐变的中心默认是容器的中心，渐变的形状是圆形渐变结束位置接下来我们来做两个稍微复杂一点的例子，指定渐变的中心和渐变的结束位置：div{width:100px;高度：100px；背景图像：径向渐变（最近的圆圈在30px30px，红色，灰色en);}渐变的起始位置为(30,30)，结束位置位于离容器最近的一侧。我们来看一个对比例子，当结束位置位于离渐变中心最远的一侧时：div{width:100px;高度：100px；background-image:radial-gradient(farthest-sidecircleat30px30px,red,green);}多色渐变让我们添加一些材质，添加第三种颜色，并指定渐变位置：div{width:100px;高度：100px；边框：1px实心#ccc；background-image:radial-gradient(closest-sidecircleat50px50px,red20%,green80%,white);}椭圆的径向渐变首先使用圆形渐变介绍渐变。下面简单介绍一下椭圆的径向渐变。让我们看一个简单的例子div{width:100px;高度：100px；边框：1px实心#ccc；background-image:radial-gradient(ellipse40px20px,red,green,white);}与圆形渐变的区别在于，圆形渐变设置的是圆的半径，而椭圆渐变设置的是横轴半径和纵轴椭圆的半径repeating-radial-gradientrepeating-radial-gradient创建一个具有从原点辐射的重复渐变的图形，并使用与radial-gradient相同的参数。下面通过一个例子来看看两者的区别：div{width:100px;高度：100px；边框：1px实心#ccc；background-image:repeating-radial-gradient(ellipse40px20px,red,green,white);}simpleapplicationdiv{宽度：200px;高度：100px；背景：#655；背景图像：radial-gradient（棕褐色30%，透明0），径向渐变（棕褐色30%，透明0）；背景尺寸：30px30px；background-position:00,15px15px;}上面的例子实现点阵很简单，关键是通过background-position设置图层的位置，这样两个图层刚好互补，如果有错误本文或有不严谨之处，敬请批评指正。喜欢的话请点赞收藏
