· CSS3里面的新增主要有：CSS選擇器，盒子中的修飾，背景，文本效果，字體，2D/3D，過渡動畫，多列布局等等。

　　· CSS選擇器

　　1、p:first-of-type 選擇屬于其父元素的首個元素的每個元素。

　　2、p:last-of-type 選擇屬于其父元素的最后元素的每個元素。

　　3、p:only-of-type 選擇屬于其父元素唯一的元素的每個元素。

　　4、p:only-child 選擇屬于其父元素的唯一子元素的每個元素。

　　5、p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個元素。

　　· 盒子修飾

　　新增了邊框屬性：

　　1、border-radius

　　支持瀏覽器：IE9+、Firefox、Chrome、Safari 、Opera

　　2、box-shadow 向方框添加一個或多個陰影

　　支持瀏覽器：IE9+、Firefox、Chrome、Safari 、Opera

　　3、border-image

　　支持瀏覽器：Firefox(舊版本需要前綴-moz-)、Chrome(舊版本需要前綴-webkit-)、Safari(Safari 5 以及更老的版本需要前綴 -webkit-) 、Opera( 需要前綴 -o-)

　　· CSS新增背景模塊

　　1、background-size 規定背景圖片的尺寸

　　支持瀏覽器：IE9+、Firefox(舊版本需要前綴-moz-)、Chrome、Safari、Opera

　　2、background-origin 規定背景圖片的定位區域，背景圖片可以放置于 content-box、padding-box 或 border-box 區域。

　　支持瀏覽器：IE9+、Firefox、Chrome、Safari、Opera

　　3、background-clip 規定背景的繪制區域

　　支持瀏覽器：IE9+、Firefox、Chrome、Safari、Opera

　　· CSS文本效果模塊

　　1、text-shadow 可向文本應用陰影

　　支持瀏覽器：IE10、Firefox、Chrome、Safari、Opera

　　2、word-wrap 允許文本強制文本進行換行 - 即使這意味著會對單詞進行拆分

　　支持瀏覽器：所有主流瀏覽器

　　· CSS引入字體模塊

　　@font-face

　　· 2D/3D

　　1、transform 向元素應用 2D 或 3D 轉換

　　支持瀏覽器：

　　IE10：2D、3D都支持(2D IE9 需要前綴 -ms-);

　　Firefox：2D、3D都支持;

　　Chrome：2D、3D都支持(2D、3D需要前綴 -webkit-);

　　Safari：2D、3D都支持(2D、3D需要前綴 -webkit-);

　　Opera：只支持2D

　　· 過渡動畫

　　1、transition 過渡屬性

　　支持瀏覽器：IE 10、Firefox、Chrome(Chrome 25 以及更早的版本，需要前綴 -webkit-)、Opera、Safari( 需要前綴 -webkit-)

　　2、@keyframes 用于創建動畫。

　　在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。

　　支持瀏覽器：IE 10、Firefox、Chrome(Chrome 25 以及更早的版本，需要前綴 -webkit-)、Opera、Safari( 需要前綴 -webkit-)

　　3、animation 動畫調用屬性

　　支持瀏覽器：IE 10、Firefox、Chrome(Chrome 25 以及更早的版本，需要前綴 -webkit-)、Opera、Safari( 需要前綴 -webkit-)

　　· 多列布局

　　1、column-count=======劃分列數

　　2、column-gap=========屬性規定列之間的間隔大小

　　3、column-rule========設置或檢索對象的列與列之間的邊框

　　4、column-fill========設置或檢索對象所有列的高度是否統一

　　5、column-span========設置或檢索對象元素是否橫跨所有列。

　　6、column-width=======設置或檢索對象每列的寬度

　　更多關于前端培訓的問題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓服務經驗，采用全程面授高品質、高體驗培養模式，擁有國內一體化教學管理及學員服務，助力更多學員實現高薪夢想。