css3背景与效果

一、背景  background
    1，回顾
        background-color
        background-image
        background-position
        background-repeat
        background-size
        background-attachment:fixed  背景固定
    2，background-origin  &&  background-clip
        background-origin: 背景起源属性
            content-box:盒子的内容，有这个属性就是盒子背景从内容开始渲染，如果没有这个属性，默认就是从盒子左上角开始渲染
            注意：padding区域永远是有背景的
        background-clip:  背景剪裁
            content-box:padding区域没有背景
            padding-box:padding区域有背景
        /*
            第一个content-box是bgcp，第二个是bgo的
         */
        background: url(images/shishi.jpg) content-box  content-box;
    3，background-size
        改变背景大小    ie9开始兼容
        background-size:100px 100px;
            将背景图片变成100x100的大小
            如果背景图片本身不是正方形，那么背景会变形
        background-size:100px auto;
            在图片不变形的情况下，高度自适应，按比例设置宽高，但是有可能背景显示一部分
        background-size:cover;
            在图片不变形的情况下，尽可能多的显示内容，根据图片的宽高比例和盒子的宽高比例不同的话，会出现两种情况：显示不完整，显示完整
        background-size:contain;
            图片不变形的情况下按照短边长度缩放，图片一定能展示完整，但是可能会留白
    4，多背景
        在一个盒子中设置多个背景图片  ie9
        background:url() repeat,url() no-repeat,url() repeat-x.....
        按照书写顺序堆叠平铺，第一个是最上边的
        background-size:auto auto,100px 100px,200px 200px.......;
二、蒙版
    可以使用图片或者渐变作为遮罩层
    语法：
        -webkit-mask-image:url();
        -webkit-mask-repeat:no-repeat;
        -webkit-mask-position:center center;
    综合语法：
        -webkit-mask:url() no-repeat center center;
    注：目前之后webkit内核可以支持该属性
三、倒影
    -webkit-box-reflect:right 0px;
    参数1：倒影的位置  above  below  left  right
    参数2：倒影的距离  2px
    倒影与真实图片之间的距离
    倒影加渐变：
        -webkit-box-reflect:right 0px -webkit-linear-gradient(top,red,green);
四、过渡  transition
    过渡：元素从一个状态变为另一个状态的过程展示，是一个动画的转变过程，而不是瞬间完成的
        transition:all 1s ease 0s;
        参数1：参与过渡的属性是什么
            all:所有属性都参与过渡
            height:只有高度参与过渡
            width:只有宽度参与过渡
            .......
            height,width......
        参数2：过渡动画的时间，单位s（秒），单位必须写，多长时间完成过渡动画
        参数3：过渡缓冲描述，ease表示不均匀运动，linear匀速运动，使用贝塞尔曲线实现运动轨迹：cubic-bezier(.11,1.09,.98,.15)
        参数4：过渡延迟时间，单位s，多少秒后开始过渡
    那些属性可以参与过渡？
        基本上大部分属性都可以过渡，但是背景颜色渐变不能过渡，浮动不能过渡
        注：jquery的animate动画不支持background-color和background-position的动画，所以这些都要用过渡实现
    过渡什么情况下会被触发？
        当参与过渡的属性方式变化时都可以触发过渡，eg:类名的变化，js的设置，伪类