渐变色背景

先上效果图：

渐变色，支持多种颜色的拼接，平滑过渡，可以分为线性渐变和径向渐变。由于目前使用到了线性渐变，所以说两句。

---

上代码:

margin: 0;
padding: 0;

width: 100%;
height: 100%;
    
background:linear-gradient(to bottom, rgba(143,221,046,0.3),rgba(24, 148, 90, 0.3),rgba(10, 86, 138, 0.3),rgba(22, 40, 202, 0.3));

background:linear-gradient(direction,color1,color2…)

direction表示方向，自上而下，从左至右，左上到右下…,也可以使用角度deg。

方向 -->自上而下(默认情况)

background:linear-gradient(to bottom, rgba(143,221,046,0.3),rgba(24, 148, 90, 0.3),rgba(10, 86, 138, 0.3),rgba(22, 40, 202, 0.3));

background:linear-gradient(rgba(143,221,046,0.3),rgba(24, 148, 90, 0.3),rgba(10, 86, 138, 0.3),rgba(22, 40, 202, 0.3));

两行代码的效果完全相同。

方向	direction
上<–>下	to top / bottom
左<–>右	to left / right
左上<–>右下	to left top / right bottom

其他方向也以此类推。

颜色

1. 颜色名，如 red,blue…
2. 16进制 如 #FFF
3. rgb()
4. rgba()，包含透明度设置