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>：用百分比指定起止色位置。