浅探css3渐变
css3的渐变属性已经在各种网页设计中被广泛使用，在没有css3的渐变属性之前，要实现一些多种颜色切换的效果图，你可能别无他法，只能用一个图片来显示，虽然你知道使用图片需要网络请求，既耗带宽又耗时间，下面我将介绍用css3的渐变来改善这一问题。
linear-gradient
基本用法
想要知道线性渐变有什么用，当然要先学习它的属性和用法。下面我们先一起学习一下线性渐变的属性。
linear-gradient([ [ [ <angle> | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
linear-gradient函数的第一个参数是角度或者方向，第二个参数是截止颜色的值，要想产生渐变的效果，当然至少要两个或者两个以上的颜色值。先来看一个简单的例子：
<div></div>
div {
width: 100px;
height: 100px;
background: linear-gradient(white, gray);
}
如上图所示，创建一个100*100的方块，从上到到下线性渐变，又白色过渡到灰色，linear-gradient不传位置参数时默认从顶部到底部进行线性渐变，下面来看一个有位置信息的渐变例子：
div {
width: 100px;
height: 100px;
background: linear-gradient(to right, white, gray);
}
位置信息的传递由to关键加上位置，表示向什么方向进行颜色渐变，上面表示由左向右进行颜色渐变，那想向右上角渐变怎么办呢？很简单，linear-gradient(to right top, white, gray)就可以了，那传入角度又是怎么线性渐变的呢？来看个例子：
div {
width: 100px;
height: 100px;
background: linear-gradient(0deg, white, gray);
}
这个角度指的是什么呢？新标准中将0deg指向北方，并且顺时针增加，因此在上图当传入角度为0deg时，由下而上进行渐变。
有的时候你可能不想从一开始就出现渐变，想在某个指定的位置开始渐变，这该怎么办呢？来看个例子：
div {
width: 100px;
height: 100px;
background: linear-gradient(90deg, red, red 80%, gray);
}
我们在希望梯度开始的地方的地方加个同样色值的颜色中间点，就像上面那样，在80%的位置开始渐变
repeating-linear-gradient
这又是个什么函数？这个函数的用法参数和linear-gradient一摸一样，但是它会在所以方向上重复渐变以覆盖其整个容器。不懂什么意思？来看个例子就明白了：
div {
width: 100px;
height: 100px;
background-image: repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%);
}
看了例子是不是就一目了然了，在7%的位置开始渐变，渐变到10%的位置，然后重复
简单用法（方格文图案）
话不多说直接上例子：
上面的方案文图案是怎么实现的呢？来看具体样式：
div {
width: 100px;
height: 100px;
background: white;
background-image:
linear-gradient(90deg, rgba(200,0,0,0.5) 50%, transparent 0),
linear-gradient(rgba(200,0,0,0.5) 50%, transparent 0);
background-size: 30px 30px;
}代码是不是很简单呢？实际上就是利用的background-image属性先竖话30*30的格子，像右渐变，在50%的地方渐变到透明色，然后在横画，向下渐变，在50%的地方渐变到透明色，再叠加，是不是很简单呢？赶紧自己去试试吧！
radial-gradient
基本用法
径向渐变用来展示由原点（渐变中心）辐射开的颜色渐变。我们先来看一下radial-gradient的基本语法：
radial-gradient( [ circle || <length> ] [ at <position> ]? ,
| [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,
| [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,
| at <position> ,
<color-stop> [ , <color-stop> ]+ )
- position：与background-position或者transform-origin的取值类似，如果没有，取中心点
- shape：渐变的形状，取值为circle或者ellipse，默认为ellipse
- color-stop：表示某个确定位置的固定色值，包含一个<color>值加上可选的位置值
- extent-keyword：用于描述边缘轮廓的具体位置，它的取值：closest-side(渐变中心距离容器最近的边作为终止位置)、closest-corner(渐变中心距离容器最近的角作为终止位置)、farthest-side(渐变中心距离容器最远的边作为终止位置)、farthest-corner(渐变中心距离容器最远的角作为终止位置)
介绍了基本的概念之后，让我们来看一个例子：
div {
width: 100px;
height: 100px;
background-image: radial-gradient(red, green);
}
上面例子是最简单的径向渐变，所有的取值都是默认值，渐变中心默认为容器中心，渐变的形状为圆形
渐变终止位置
接下来让我们两个稍微复杂一点的例子，指定渐变中心和渐变终止位置：
div {
width: 100px;
height: 100px;
background-image: radial-gradient(closest-side circle at 30px 30px, red, green);
}
渐变的起始位置(30, 30)，终止位置位于距离容器最近的边，再来看一个对比的例子，当终止位置位于距离渐变中心最远的边时：
div {
width: 100px;
height: 100px;
background-image: radial-gradient(farthest-side circle at 30px 30px, red, green);
}
多颜色渐变
下面让我们再加点料，加上第三种颜色，并且指定渐变位置：
div {
width: 100px;
height: 100px;
border: 1px solid #ccc;
background-image: radial-gradient(closest-side circle at 50px 50px, red 20%, green 80%, white);
}
椭圆的径向渐变
上面都是用圆形渐变介绍了渐变用法，接下来简单介绍一下椭圆的径向渐变，来看一个简单例子
div {
width: 100px;
height: 100px;
border: 1px solid #ccc;
background-image: radial-gradient(ellipse 40px 20px, red, green, white);
}
和圆形渐变有点不一样的地方就在于圆形渐变设置的是圆的半径，而椭圆渐变设置的椭圆的横轴半径和纵轴半径
repeating-radial-gradient
repeating-radial-gradient创建一个原点辐射的重复渐变的图形，和radial-gradient采用的是同样的参数，下面让我们通过一个例子看一下两者之间的差别：
div {
width: 100px;
height: 100px;
border: 1px solid #ccc;
background-image: repeating-radial-gradient(ellipse 40px 20px, red, green, white);
}
简单应用
div {
width: 200px;
height: 100px;
background: #655;
background-image: radial-gradient(tan 30%, transparent 0),
radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}
上面的例子很简单的就实现圆点矩阵，关键就是通过background-position设置图层的位置，让两个图层恰
好互补
总结
以上对css3的线性渐变和径向渐变做了简单介绍，想要更好掌握渐变的用法，还是需要更多的实践。
这篇文章如果有错误或不严谨的地方，欢迎批评指正，如果喜欢，欢迎点赞收藏