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)
a89d
75%,
rgba(255,0,198,1) 88%,
rgba(255,0,198,0.8) 93%,
rgba(255,0,198,0) 100%);
}