一,CSS3漸變的分類
(1)線性漸變（Linear Gradients）
一個起點顏色一個終點顏色(必須至少兩種顏色)
預設從上到下
#grad { background-image: linear-gradient(#e66465, #9198e5); }

從左到右
#grad { 
 background-image: linear-gradient(to right, red , yellow);
        }

指向右下
#grad {
         background-image: linear-gradient(to bottom right, red, yellow);
}

可以設定顏色的百分佔比
background-image:linear-gradient(to right,rgba(0,0,255,0.3),rgba(255,0,0,1))

(2)徑向漸變（Radial Gradients）- 由它們的中心定義
徑向漸變預設是橢圓形(ellipse),即如果div不是正方形,則漸變形狀為橢圓性,可以通過設定circle來強行顯示為正圓,徑向漸變的大小可以通過給顏色設定百分比來設定
#grad { background-image: radial-gradient(red 5%, yellow 15%, green 60%); }

二,css3新增圖片背景屬性
不同圖片不同屬性
最多支援兩張圖片
#example1 { 
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

(1) ,background-Origin屬性(常用屬性)
background-Origin屬性指定了背景影象的位置區域。
content-box,//背景圖片只在內容中顯示
padding-box,//背景圖片只在內容+padding中顯示
border-box//背景圖片在內容+padding+border中顯示
background-origin:content-box;



(1) ,background-clip屬性(效果和origin相同,引數少一個,人們常用origin)
content-box//背景圖片只在內容中顯示
border-box//背景圖片在內容+padding+border中顯示
background-clip: content-box;

三,css過渡動畫
CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。要實現這一點，
必須規定兩項內容：
1、指定要新增效果的CSS屬性
2、指定效果的持續時間。
如果未指定的期限，transition將沒有任何效果，因為預設值是0,沒有過渡效果
過渡屬性
屬性 描述 CSS
transition 簡寫屬性，用於在一個屬性中設定四個過渡屬性。 3
transition-property 規定應用過渡的 CSS 屬性的名稱。 3
transition-duration 定義過渡效果花費的時間。預設是 0。 3
transition-timing-function 規定過渡效果的時間曲線。預設是 "ease"。 3
transition-delay 規定過渡效果何時開始。預設是 0。 3
div { transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s; /* Safari */ 
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}