CSS3渐变/过渡

线性渐变
    方向 默认从上到下
         background:
        linear-gradient(2~多个颜色，颜色中间用逗号分隔);
        linear-gradient(to 方向[1到2两个],2~多个颜色，颜色中间用逗号分隔)
        linear-gradient(度数deg,2~多个颜色，颜色中间用逗号分隔)
        加浏览器内核
        方向:方向没有to 直接跟的left/right/。。。【两个方向的时候 浏览器加内核的识别标准跟同一标准不一样】
        度数:从右边开始逆时针的方向进行
        background-image

径向渐变
     向四周扩散的渐变，默认为椭圆状
        background/background-image:radial-gradient(2至多个颜色)
        在颜色后面添加百分比【从小到大顺序】;  形状,颜色
        -webkit-radial-gradient(方位,颜色)
        方位，形状，颜色

 重复渐变
    repeating[颜色必须跟百分比，否则无法形成重复渐变的效果]
         repeating-linear-gradient
        repeating-radial-gradient

css中背景相关的属性
    background-clip
        指定背景的显示范围
            background-clip:border-box;  默认值
background-clip:padding-box；背景被裁剪到内边距框
background-clip:content-box；背景被裁剪到内容框
-webkit-background-clip:text ；
    background-origin
        绘制背景图像时的起点
            background-origin:padding-box  默认值；
background-origin:border-box  背景图像相对于边框盒来定位
background-origin:content-box  背景图像相对于内容框来定位
    background-size
        背景图的大小
            background-size：200px  100px;  或者  background-size:200%  100%;
background-size:cover;把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
background-size:contain;  保持背景图像本身的宽高比例不变进行缩放。

CSS3中Transition过渡属性
    transition-property
        需要过渡的样式 ，默认是 all 
    transition-duration
        运动时间 默认是 0 s     
    transition-delay 
        延迟时间 默认是 0 s  
    transition-timing-function
        运动形式   默认是 ease
ease：（慢速开始，然后变快，然后慢速结束）  
 linear：（匀速）  ease-in：(加速)
ease-out：（减速）
ease-in-out：（先加速后减速）
cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）http:cubic-bezier.com
steps（） 实现一个关键逐帧动画的功能