CSS3（一）

前缀&渐变&过渡

浏览器私有前缀

-ms- 内核 IE浏览器专属的CSS属性需添加一ms前缀
-moz- 所有基于Gecko引擎的浏览器(如Firefox) 专属的cSS属性需添加-moz前缀
-0- Opera浏览器专属的CsS属性需添加-0-前缀
-webkit- 所有基于Webkit引擎的浏览器( 如Chrome、Safari) 专属

渐变

渐变: 背景色渐变
线性渐变 和 径向渐变

  线性渐变 :  background: linear-gradient();
              background: -webkit-linear-gradient();
                注意: 与标准写法不同的地方 ,方向不需要添加 to 
                      方向与标准方向写相反 ,从一个方向到另一个方向
   		从一个方向到另一个方向的渐变
        1.水平渐变:
            第一个值:渐变的方向 left right top bottom 
            第二个值:渐变的颜色 . 两个颜色以上
                   ( pink50%,red50%);  颜色值的分布
        2.对角渐变
            渐变方向
            left top , right top, left bottom , right bottom 
        3.角度渐变 
            渐变的方向:
                deg  20deg 

过渡

CSS3过渡：在一定的时间区间内平滑的过渡。
条件：需要事件才能触发。
事件： :hover :focus :active …

    过渡:
    transition-property：	  检索或设置对象中的参与过渡的属性
                          all;   全部属性值(默认值)。
                          transition:all 2s;
                          transition:width 2s;

    transition-duration：	  检索或设置对象过渡的持续时间  s ms 
    transition-delay：	  检索或设置对象延迟过渡的时间
                     transition:all 2s 1s;
    transition-timing-function：检索或设置对象中过渡的动画类型
            1.linear;   规定以相同速度开始至结束的过渡效果。匀速运动
            2.ease;    规定慢速开始，然后变快，然后慢速结束的过渡效果。慢 快 慢默认值
            3.ease-in;  规定以慢速开始的过渡效果。
            4.ease-out;   规定以慢速结束的过渡效果。
            5.ease-in-out;     规定以慢速开始和结束的过渡效果
            6.cubic-bezier(n,n,n,n);   在cubic-bezier 函数中定义自己的值。可能的值是0至1之间的数值
                贝塞尔曲线
            7.steps()  逐帧动画