一、背景  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的設定，偽類