css3渐变色

作用：让元素在两个或多个指定的颜色之间显示平稳的过渡。

种类：分为线性渐变与径向渐变

一、线性渐变

1、向下/向上/向左/向右/对角方向

语法：background-image: linear-gradient(direction, color-stop1, color-stop2, …);

direction属性值：

to bottom

默认值，从上到下

to top

从左到右

to left

从右到左

to right

从左到右

to bottom right

从左上到右下

其中对角有四个属性值，分别为左上、左下、右上、右下，这里就不一一列举了。

实例：background-image: linear-gradient(red,yellow,green);

2、使用角度属性

语法：background-image: linear-gradient(angle, color-stop1, color-stop2, …);

angle表示角度，属性值为 xxxdeg。角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

实例