突变（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