CSS3渐变，过渡，转换，动画及浏览器兼容问题——近日总结（一）

●浏览器兼容问题

     ~~~~     CSS3中很多属性需要加上专属前缀才能兼容，下面列出常用浏览器的前缀
                        ~~~~~~~~~~~~~~~~~~~~~~~                        IE和safari                                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~                                                     -webkit-
                        ~~~~~~~~~~~~~~~~~~~~~~~                        Chrome                                                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~                                                         -ms-
                        ~~~~~~~~~~~~~~~~~~~~~~~                        Firefox                                                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~                                                           -moz-
   ~~   

●Gradients(渐变)

     ~~~~     线性渐变

          ~~~~~~~~~          语法

banckground: linear-gradients(direction, color-stop1, color-stop2, ...)

方向direction 可以为上下左右，也可以使用角度
          ~~~~~~~~~          使用角度
            ~~~~~~~~~~~            角度是指水平线和渐变线之间的角度，逆时针方向计算。
            ~~~~~~~~~~~            即 0deg将创建一个从下到上的渐变，90deg将创建一个从左到右的渐变。

       ~~~~~~       但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

/*从上到下*/
#grad {
	background: -webkit-linear-gradient(red, blue); 
	background: -o-linear-gradient(red, blue);
	background: -moz-linear-gradient(red, blue);
	background: linear-gradient(red, blue);
}
/*从左到右*/
#grad {
    background: -webkit-linear-gradient(left, red, blue);
    background: -moz-linear-gradient(right, red, blue);
    background: -o-linear-gradient(right, red, blue);
    background: linear-gradient(to right, red, blue);
}
/*使用角度*/
#grad {
    background: -webkit-linear-gradient(180deg, red, blue);
    background: -moz-linear-gradient(180deg, red, blue);
    background: -o-linear-gradient(180deg, red, blue);
    background: linear-gradient(180deg, red, blue);
}

-webkit-linear-gradient的方向写的是起点，不是终点方向

linear-gradient的方向写法是 to direction 填写终点方向

     ~~~~     径向渐变（个人认为非重点）

         ~~~~~~~~         语法

background: radial-gradient(center, shape size, start-color, ..., last-color);

         ~~~~~~~~         设置形状

      ~~~~~      shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

#grad {
  background: -webkit-radial-gradient(circle, red, yellow, green);
  background: -o-radial-gradient(circle, red, yellow, green);
  background: -moz-radial-gradient(circle, red, yellow, green);
  background: radial-gradient(circle, red, yellow, green);
}