css3-渐变

通过Photoshop屏幕截图可以注意到，颜色从0%的不透明度开始，第一个色标的位置位于0%，其透明度为0%，第二个色标位置为80%的不透明度，位置位于8%。可以使用这个渐变工具从CSS声明中捕捉相关数据，实现自定义线性渐变。

一个渐变可以包含多个色标，位置值为0～1之间的小数，或者0%～100%之间的百分数，指定色标的位置比例，其用法与Photoshop中的值线渐变工具用法相似.

.toLeft {  
            background-image:-webkit-linear-gradient(
                to left,
                rgba(255,0,0,0) 0%,
                rgba(255,0,0,0.8) 7%,
                rgba(255,0,0,1) 11%,
                rgba(255,0,0,1) 12%,
                rgba(255,252,0,1) 28%,
                rgba(1,180,7,1) 45%,
                rgba(0,234,255,1) 60%, 
                rgba(0,3,144,1) 75%, 
                rgba(255,0,198,1) 88%,    
                rgba(255,0,198,0.8) 93%,    
                rgba(255,0,198,0) 100%);  
            background-image:linear-gradient(    
                to left,    
                rgba(255,0,0,0) 0%,    
                rgba(255,0,0,0.8) 7%,    
                rgba(255,0,0,1) 11%,   
                rgba(255,0,0,1) 12%,    
                rgba(255,252,0,1) 28%,    
                rgba(1,180,7,1) 45%,    
                rgba(0,234,255,1) 60%,    
                rgba(0,3,144,1) 75%,    
                rgba(255,0,198,1) 88%,    
                rgba(255,0,198,0.8) 93%,    
                rgba(255,0,198,0) 100%);  
        }