CSS3提供了创建颜色渐变的方式，在两个或更多的颜色之间进行平滑的过渡。

浏览器共支持两种形式的渐变：线性渐变和径向渐变。

一. 线性渐变

线性渐变是css提供的一个函数，这个函数是创建了一个image，这个image展示了颜色的渐变。

注意:

• 需要注意的是css的渐变 不是颜色，而是image，只是这个image没有固有的尺寸而已。

• 所以渐变是给background属性或者background-image属性赋值的。

• 不能给background-color赋值

语法:

linear-gradient( 45deg, blue, red );           /* A gradient on 45deg axis starting blue and finishing red */
linear-gradient( to left top, blue, red);      /* A gradient going from the bottom right to the top left starting blue and 
                                                  finishing red */

linear-gradient( 0deg, blue, green 40%, red ); /* A gradient going from the bottom to top, starting blue, being green after 40% 
                                                  and finishing red */

repeating-linear-gradient()

可以重复

二. 径向渐变

径向渐变和线性渐变的含义差不多,只是径向渐变是沿着虚拟的轴从中心向外渐变。

background-image: radial-gradient(circle farthest-corner at center , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);

说明:

• circle是指定的径向渐变的时候的形状。

• farthest-corner一个扩展关键字，指的是到最远的的角相切

• at center开始渐变的起始位置。

• #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95% 各种颜色，额可以根据需要添加很多颜色

repeating-radial-gradient()

可以重复.