linear-gradient（）图像渐变属性详解
对于linear-gradient()我学习的时候，查了很多资料，但是发现不管是⽹上还是⼀些书籍，都没有将这个属性的运⽤讲得明⽩，清楚，对此，我写了这篇博客，虽然不能保证每⼀位读者都能够看懂，但是也希望这篇博客能为你提供⼀些帮助，如有问题，请在博客中提出，谢谢。
⾸先给⼤家讲的就是兼容性，在IE浏览器中这个属性的设置是不兼容的，当然在IE浏览器中也可以实现类似的效果，那边是滤镜(fliter)的作⽤了.其他的不同的浏览器也是有不同的，⽐如chrome⼀般要加-webkit-前缀，如：-webkit-linear-gradient，⽐如opera就是-o-linear-gradient。
linear-gradient是属于CSS3中Gradient中的两个属性⼀个，这两个属性分别为linear-gradient（线性渐变）和radial-gradient（径性渐变），其中linear-gradient线性渐变呈现线性变化，⼤家⼀看名称就可以知道这相当于是直线变化，⽐如充左上⾓到右下⾓的变化，或者从上到下，⽽radial-gradient径性渐变呈现径性变化，这便是⼤家经常见到的圆圈渐变效果，从图像的中间向四周进⾏变化，像是⼤家仍块⽯头到河⾥荡起的涟漪⼀样。⽽本⽚博客则是讲解linear-gradient，当然，linear-gradient和radial-gradient是相通的，他的使⽤⽅法⼀样，则是呈现的效果不同⽽已。
如下是简单的linear-gradient的使⽤
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>linear-gradient</title>
<style type="text/css">
*{margin:0;padding:0;}
.posDir{margin:100px auto;}
.linearBar{width:100px;height:100px;border:1px solid #ccc;
background-image:linear-gradient(45deg, #000,#fff);
/*********************************偏向⾓度，起始点颜⾊，终⽌点颜⾊***************/
}
</style>
</head>
<body>
<div class="linearBar posDir"></div>
</body>
</html>
效果:
这⾥提到了background-image：对这个属性进⾏linear-gradient，简单的说这个linear-gradient设置是针对图⽚的，所以必须是放图⽚的属性才能运⽤这个linear-gradient进⾏设置.
除了以上的⾓度使⽤(40deg)，除此之外，还有提供的⼀些类似于C语⾔中的常量的东西，如下:
linear-gradient(left bottom, #000, #fff);
这个⽤来代替上⾯background-image中linear-gradient会产⽣⼀样的效果。
其中，第⼀个选项可以是 top, left, bottom, center, right.
以上是对于最常见的两种颜⾊的使⽤，但是这并不能满⾜我们的需求，
所以多种颜⾊的运⽤是必不可少的，接下来就是多种颜⾊的讲解。
background-image:linear-gradient(40deg, #99CC33, #FF6666,#336699,#FF0033);
将代码中的 background-image改为如上代码，会呈现如下效果:
如此，这效果，是#99CC33, #FF6666,#336699,#FF0033均匀分布产⽣的结果，⾃然默认是均匀的，那么⾃然也存在不均匀的，这就需要我们⾃⼰设置了，这也是⽹上资料坑爹的地⽅，他们没有对这⼀属性的使⽤进⾏简单明了的讲解，所以我来插
⼀脚，写⼀个:
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255
⼤家看着这个代码可能会有点迷糊，这是什么，写得也太长了，但是我想说的是，这个东西基本就是不均匀⾃主控制渐变的⼀个典型例⼦，⾸先，⼤家要明确⼀个概念，就是第⼀个 rgba(255,255,255,.15) 25%，说的是从左下⾓开始起到 25%为 rgba(255,255,255,.15)，这
⾥默认隐藏了其实点的设定，然后 transparent 25%到 50%是透明的( transparent)，然后就是 25%到 75%为
rgba(255,255,255,.15)这个颜⾊，接着就是从75%到100%为transparent，这⾥⼜省略了⼀个100%他是默认值，这代码直接使
⽤时没有什么效果的，他必须有背景颜⾊做衬托。
我加了⼀⾏这个:background-color:#33CC99；呈现的效果如下:
如此便是有⼀个运⽤，那就是进程条，当我们将这个东西运⽤到实际的时候，会发现，这个东西形成的东西如此美观，代码
如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>linear-gradient</title>
<style type="text/css">
*{margin:0;padding:0;font-family:"微软雅⿊";}
.progress{margin:100px auto;width:80%;box-shadow:inset 0 1px 2px rgba(0,0,0,.1);border-radius:4px;
height:20px;overflow:hidden;background-color: #f5f5f5;}
.progress-bar{float:left;width:0;height:100%;line-height:20px;color:#fff;text-align:center;
background-color: #5cb85c;box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);}
.progress-bar-striped{width:100px;height:100px;border:1px solid #ccc;
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255  background-size:40px 40px;
}
</style>
</head>
<body>
<div class="progress">
<div class="progress-bar progress-bar-striped" >60%</div>
渐变颜代码大全</div>
</body>
</html>
效果如下:
如上的效果中的间隔式的波浪便是渐变的效果，是不是⾮常的美观好看，此中还有个background-size这个设置，这是为了设
置渐变图⽚⼤⼩，当然⼤家还是会疑惑，为什么会出现这样的效果，其中还有个默认的属性background-image:repeat重复，
我们设置的图⽚只有40px, 40px这样只会产⽣⼀个图⽚，只有进⾏重复才能形成上⾯的效果，也许⼤家会疑惑，为什么要设
成40px 40px进程条的⾼度⾄于20px，可不可以写成20px 20px，答案可以告诉⼤家，肯定可以，但是并不美观，⼤家可以思
考思考。
linear-gradient便是讲到这⾥，可能其中存在什么缺陷，我⽇后会进⾏修改更新。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。