HTML+CSS39 渐变效果

linear-gradient

linear-gradient( 
  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops  

• <angle>| to <side-or-corner>用来描述渐变发生的方向或角度的。未指定时，默认是由上至下进行渐变。
• <color-stop>由一个<color>值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的<length>）。取值如：#FF837E 80%或者blue 30px。

它分为两组参数，第一组参数用来描述渐变线的起点位置，to top这样的值会转换为0度，to left会被转换为270度。第二组参数可以包含多个值，用逗号分隔，每个值都是一个色值，后面跟随一个可选的终点位置，终点位置可以是百分比也可以是绝对值

CSS规范规定，如果某个色标的位置值比整个列表在它之前的位置都要小，则改色标的位置会被设置为它前面的额所有色标位置值的最大值，所以可以使用0来指代前面的颜色的位置最大值

（1）默认效果

.container {
  background: linear-gradient(white, black);
}

（2）从左到右的渐变：

.container {
  background: linear-gradient(to right, white, black);
  /* 或者 */
  background: linear-gradient(90deg, white, black);
}

（3）从左到右渐变，渐变位置发生在中间的一小部分（20%左右）

.container {
  background: linear-gradient