SOURCE

<div class="e1">
  linear-gradient，渐变 <br />
  默认是纵向，从上到下
</div>
<div class="e2">
  当给定位置值时，渐变就从位置值开始。
</div>
<div class="e3">
  两个值相等，并且不为0时，得到的背景视觉上是没有渐变过度的。<br />
  如果都为0，得到的是渐变终点颜色值为主的纯色。
</div>
<div class="e4">
  如果给定了background-size，那么background-image的大小就以background-size为准，但是由于默认背景是平铺的，就得到了颜色相隔的条纹效果
</div>
<div class="e5">
  如果某个值比它前面的值都要小，那么该值为变为前面所有值中的最大值。也就是说，后面的值只能比前面的值更大，这个例子中pink被给了50%，然后后边的yellow也是50%，覆盖掉了pink
</div>
<div class="e6"></div>

div {
  width:20em;
  height:10em;
  margin-bottom:5px;
  border:5px solid #fff;
}
.e1 {
  background-image:linear-gradient(#abc, #12a);
}
.e2 {
  background-image:linear-gradient(#fb3 30%, #58a 50%);
}
.e3 {
  background-image:linear-gradient(#fb3 40%, #58a 40%);
}
.e4 {
  background-image:linear-gradient(#fb3 50%, #58a 50%);
  background-size:100% 30px;
  -background-repeat:no-repeat;
}
.e5 {
  background-image:linear-gradient(#fb3 20%, #58a 50%, pink 30%, yellow 0);
}
.e6 {
  background-image:linear-gradient(#fb3 20%, #58a 50%, yellow 0);
}