参考自Rabbit_svip原文

线性渐变

background-image: linear-gradient(degree, color1, color2, ..., colorN)

线性渐变是最基本的渐变类型。这种渐变在一条直线上从一个颜色过渡到另一个颜色。

这条直线的方向由角度指定，或者在关键字 to 后面加上 top、bottom、right、left 中的某一个关键字或多个关键字。

渐变方向也不局限于只能使用关键字，还可以使用角度值指定渐变的方向。

角度值的写法：在0~360之间的数字后面加上deg，指定过渡在哪个方向结束。

例如:

to top === 0deg

to right === 90deg

to top right === 45deg

示例页面

径向渐变

径向渐变就是沿着圆周或者椭圆周向外扩散的渐变。

background-image: radial-gradient((type at offset-x offset-y), color1, color2, ..., colorN)

type：渐变方式

默认（无）：渐变中心在元素的中心，以椭圆形渐变。

offset-x/offset-y：渐变中心位置百分比，左上角为(0, 0)

circle：渐变中心在元素的中心，以圆形渐变。

closest-corner：以离渐变中心最近的顶角计算圆的半径。

closest-side：以离渐变中点最近的那一边计算圆的半径。

farthest-corner：以离渐变中心最远的顶角计算圆的半径。

farthest-side：以离渐变中心最远的那一边计算圆的半径。

渐变位置

在color后加百分比，表示改颜色结束于整个渐变背景的相应位置。

两种渐变方式都适用添加渐变位置。