CSS中背景颜色渐变

一、linear-gradient：背景颜色线性渐变

linear-gradient(方位, 起始色, 末尾色)

方位：可选参数，渐变的方位。可以使用的值有
    to top
    to top right
    to right
    to bottom
    to bottom left
    to left
    to top left
起始色 必选参数，颜色值
末尾色 必选参数，颜色值

也可以使用以角度单位的数值来设置方位。比如 0deg(0 度)相当于to top

角度会沿逆时针方向随着你的角度的增加而增加(可以是负值)。

background-image: linear-gradient(45deg,orange,green);

多色线性渐变

background-image: linear-gradient(-45deg,orange,green,blue,red);

通过百分比(也可以用像素等单位)设置多色线性位置：

ackground-image: linear-gradient(-45deg, orange 0%, green 20%, blue 40%, red 100%);

结合背景，并使用透明渐变实现强大层次感：

background-color:red;
background-image: linear-gradient(to top right, rgba(0,0,0,0.6), rgba(0,0,0,0));

重复渐变属性值

background-image:repeating-linear-gradient(to top, orange 10px, green 30px);

二、radial-gradient：径向渐变，也叫做放射性渐变

从一个点向四周发散的方式扩展

radial-gradient(形状 方位 发散方向 发散距离,起始色 起始色大小,末尾色 起始色大小)

其中起始色和末尾色为必须属性，其他为可选属性。

形状：circle：圆形; ellipse：椭圆形，默认值

方位：可选参数，径向的方位。可以使用的值有：像素、百分比、固定值，或复合搭配使用

发散方向：

top 从顶部发散
left 从左侧发散
right 从右侧发散
bottom 从底部发散
center 从中间发散

发散距离：可以用像素表示半径，但不接受百分比，也可以使用下面提供的关键词。

closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角

同样，也有重复背景方式：background-image:repeating-radial-gradient(circle 50px, orange, green);