css3渐变特性

项目中，一般用于业务办理的进度条，设置背景色，纯背景色可以直接设置，如果是渐变色，那使用line-gradient渐变特性就需要设置渐变的位置了入下图

方法一、直接在进度条轨道上面再加一个元素，用于设置渐变进度条，进而控制这个元素的长度值，可以实现

2、方法二，就是使用line-gradient 的位置参数

background: linear-gradient(#f00 0%,#ff0 50%,#0f0 100%);

此时，如果想实现以上效果图，就用设置位置达到100%，不能只设置其中的一段，否则不会起作用

正确做法：

 div {
            width: 200px;
            height: 5px;
            background: linear-gradient(to right,#fff 0%,blue 50%,#fff 50%,#fff 100%);
}
   

即后面没有进行到的部分，需用和父元素轨道背景色相同的色值进行渐变配置，不能不写，如下是错误做法：

 div {
            width: 200px;
            height: 5px;
            background: linear-gradient(to right,#fff 0%,blue 50%);//会默认渲染到100%
}

接下来，具体看一下linear-gradient()的用法

语法

<linear-gradient> = linear-gradient([ [<angle> | to <side-or-corner> ] ,]? <color-stop>[，<color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color>[<length>|<percentage>]?

用法参数说明

<angle>: 用角度值指定渐变的方向（或角度）。
　　to left：设置渐变为从右到左。相当于: 270deg
　　to right：设置渐变从左到右。相当于: 90deg
　　to top：设置渐变从下到上。相当于: 0deg
　　to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
<color-stop> 用于指定渐变的起止颜色：
<color>： 指定颜色。
<length>：用长度值指定起止色位置。不允许负值，与前面色值由空格隔开
<percentage>：用百分比指定起止色位置。