CSS 线性渐变的用法

渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

现在 CSS 可支持向下、向上、向左、向右、对角方向的渐变。一般是通过 background-image 来添加渐变的。

/*linear-gradients 是一个包含多个参数的方法*/
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

• direction，方向，默认为从上到下
• color-stop1，开始的颜色
• color-stop2，第二个颜色（结束的颜色）
• …

一个完整的实例可以写成这样：

.body {
    background-image: linear-gradient(to bottom, #e66465, #9198e5);
}

你可以发现，确定方向是开始位置 to… 结束位置的，所以我们给对角线设置方向可以是 to botoom right，以此类推。

如何使用角度作为方向？

上面的方向选取都是通过 8 个定向方向，如果是 30 度渐变应该如何实现呢？

实际上是差不多的：

/*用 angle 替换之前的 direction*/
background-image: linear-gradient(angle, color-stop1, color-stop2, ...);

/*比如 30 度的实例*/
background-image: linear-gradient(30deg, #e66465, #9198e5);

/*270 度，带透明度的实例*/
linear-gradient(270deg,#f5f7fa 0%, #c3cfe2 100%);

那这个角度的值是怎样定义和取值的呢？

围绕这个节点，我们可以看出：从上到下是-180deg、从下到上是 0deg、从左往右是 90deg、从右往左是-90deg。

当然这么理解可能有一点绕，我们也可以这么记：

最后，如果是自己设计渐变背景，往往颇有难度，不如从一些网站上积累灵感：

• Itmeo
• gradient.shapefactory.co