CSS3渐变属性

css3渐变可以让两个或者多个颜色之间平滑的显示

简单就是说一个颜色过渡到另一个颜色。

目前CSS3中有两种渐变情况

1. 线性渐变 （向下/向上/向左/向右/对角方向）
2. 径向渐变（由它们的中心定义）

今天的主角是 linear-gradient() 主要讲线性渐变

要注意的是 background-image: linear-gradient( 角度 , 颜色); 在这里不是background-color

首先我们要知道linear-gradient的语法规则，我们来看看

linear-gradient(角度，起止颜色);

角度：

to left：设置渐变为从右到左。相当于: 270deg
to right：设置渐变从左到右。相当于: 90deg
to top：设置渐变从下到上。相当于: 0deg
to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。

颜色：

这个很好理解，要做渐变，当然得设置颜色值，换句话说，你得让浏览器知道你想要实现从哪个颜色到哪个颜色之间的渐变

当然颜色分配的起始位置也是而已改变的:

background: linear-gradient(#f00 0%,rgb(43, 185, 196) 50%,#ff0 50%,#ccc 100%);

当然渐变比较坑的就是关于渐变的兼容问题，这个应该是给位强烈的注意的了

基本的方法就是这种。如果更难详细的解释会在以后的bolg中写出来