CSS中的渐变

1. 什么是渐变

两种或多种颜色间平滑过渡的效果

2. 渐变的组成（元素）

色标：决定了渐变的每种颜色及其出现的位置
每一种渐变效果都是由多个色标组成的（2个及以上）、

3. 渐变的语法

1.语法：

属性：
background-image
值：
linear-gradient() : 线性渐变
radial-gradient（）： 径向渐变
repeating-linear-gradient（）： 重复线性
repeating-radial-gradient（）： 重复径向

2.线性渐变：

语法：

：background-image:linear-gradient(angle,color-point,..);
angle: 方向或角度-即渐变的填充方向

值：

关键字：
    to top ：从下向上填充
    to right ： 从左向右填充
    to bottom ： 从上向下填充
    to left ： 从右向左填充
  角度： 0deg ~ 360deg
        0deg ： to top
        90deg ： to right
        180deg ：to bottom
        270deg ： to lef
  color-point : 色标，表示每个颜色值，及其出现的位置，多个色标之间用            
   ，分隔


**ex（例子）：**
       1. red 0%
         开始的时候的是红色
       2. blue 50px
         填充到第50像素时，变为蓝色
       3. 色标的位置可以省略 
         省略为之后，每个将平均 分配元素区域  

命令显示图：

网页示例图：

3. 径向渐变：

语法：

background-image:radial-gradient([size at position],color-point,color-point);  
size  at position: 径向渐变的半径，以及圆心位置 
size: 圆的半径， px为单位

position：圆心位置

1. 0px  0px
     将圆心设置在元素的左上角
2. 50%  50%
     将圆心设置在元素的中间位置处
3. right bottom
     关键字： top / right  / bottom / left
   /center
     将圆心设置在元素的右下角  

命令显示图：

网页示例图：

4. 浏览器的兼容性

各主流浏览器的主流版本均支持渐变效果
对于不支持渐变的浏览器，可以尝试增加浏览器前缀去实现渐变的显示。

Firefox ： -moz-
Chrome和Safari ： -webkit-
Opera ： -o-  

1. 如果浏览器不支持属性的话，则将前缀加到属性名称前：

ex（例子）：

animation:scroll 5s;
-moz-animation:scroll 5s;
-webkit-animation:scroll 5s;
-o-animation:scroll 5s; 

2. 如果浏览器支持属性，但不支持值的话，则将前缀加载到属性值的前面：

ex（例子）：

background-image:linear-gradient();
background-image:-webkit-linear-gradient();
background-image:-moz-linear-gradient();
background-image:-o-linear-gradient();