css颜色的渐变百分比 linear-gradient

    在最近项目过程中，用到了css3的渐变，之前用过很多次渐变，对于使用方法上很简单，本篇文章只研究线性渐变。

语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

 对于第一个参数direction，渐变的方向也可以是角度，非必输项默认从上到下（0deg，可能有些浏览器采用标准不同会有差异），但是对于color-stop来说最小需要两个颜色，可以是red、blue或 #f00、#00f或 rgba(255, 0, 0, 1)三种方式。

这个是默认方向角度，只有颜色

 

这是设置了一个方向，to left top 向左上渐变

    对于上边这两个例子很好理解，其实对于角度来说也是很好理解，我直接粘了个图过来大家可以看一下就好了

    那我们来用角度写一下第二个向左上渐变的例子，左上方向根据箭头指示也即是-45deg

用角度作为渐变方向

 

百分比

    对于渐变来说，大家都不陌生，但是对于百分比可能有些人没有用过或者正遇到些问题，我们还是先来个列子吧

    可以先不关注我左侧的标注，只关注输出的结果，可以看出和默认的有所区别，那分享一下我对百分比的理解，我觉得这个百分比更像是一条基准线，比如上边我给red设置50%，因为他是第一个所以默认0%也是red，所以说在0～50这个区间就是red～red的过渡也就是他自己本身。在查找下一个基线就是 80%的blue，那在50～80的区间内也就是red～blue的过渡，同理往下查找。根据这个原理我们可以最很多花式的渐变效果。

可以做一个德国国旗