精通 CSS 之 linear-gradient

如何用 CSS 实现一个渐变消失的 div，如下图所示：

其实很简单，例如：

<div class="to-bottom">

</div>

给其设置下面的 CSS 样式就好了：

.to-bottom {
  height: 200px;
  width: 350px;
  background: linear-gradient(to bottom, rgba(136, 173, 215, 1), rgba(169, 208, 113, 0));
}

修改 linear-gradient 的第一个参数，控制渐变方向，可以得到如下四种效果：

其实这里用到的 CSS 属性就是 linear-gradient，翻译成中文就是线性渐变，是指沿着线性向量填充得到的渐变，这个向量叫做梯度线（gradient line），上面的 to left，to right，to top，to bottom 四种是最简单的渐变语法，其实还可以指定任意角度，例如：

background: linear-gradient(90deg, purple, gold); 
background: linear-gradient(-135deg, purple, gold); 

而且渐变的颜色不局限于开始和结束两种，中间可以有任意多颜色的，例如：

background: linear-gradient(90deg, red, orange, blue, purple, gold); 

上面的多种颜色是均匀分布的，其实还可以指定位置：

background: linear-gradient(to bottom, red 10px, orange 100px, blue, purple, gold);