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

　　· CSS選擇器

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

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

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

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

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

　　· 盒子修飾

　　新增了邊框?qū)傩裕?/p>

　　1、border-radius

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

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

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

　　3、border-image

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

　　· CSS新增背景模塊

　　1、background-size 規(guī)定背景圖片的尺寸

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

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

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

　　3、background-clip 規(guī)定背景的繪制區(qū)域

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

　　· CSS文本效果模塊

　　1、text-shadow 可向文本應(yīng)用陰影

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

　　2、word-wrap 允許文本強(qiáng)制文本進(jìn)行換行 - 即使這意味著會(huì)對(duì)單詞進(jìn)行拆分

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

　　· CSS引入字體模塊

　　@font-face

　　· 2D/3D

　　1、transform 向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換

　　支持瀏覽器：

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

　　Firefox：2D、3D都支持;

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

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

　　Opera：只支持2D

　　· 過渡動(dòng)畫

　　1、transition 過渡屬性

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

　　2、@keyframes 用于創(chuàng)建動(dòng)畫。

　　在 @keyframes 中規(guī)定某項(xiàng) CSS 樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動(dòng)畫效果。

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

　　3、animation 動(dòng)畫調(diào)用屬性

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

　　· 多列布局

　　1、column-count=======劃分列數(shù)

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

　　3、column-rule========設(shè)置或檢索對(duì)象的列與列之間的邊框

　　4、column-fill========設(shè)置或檢索對(duì)象所有列的高度是否統(tǒng)一

　　5、column-span========設(shè)置或檢索對(duì)象元素是否橫跨所有列。

　　6、column-width=======設(shè)置或檢索對(duì)象每列的寬度

　　更多關(guān)于前端培訓(xùn)的問題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓(xùn)服務(wù)經(jīng)驗(yàn)，采用全程面授高品質(zhì)、高體驗(yàn)培養(yǎng)模式，擁有國(guó)內(nèi)一體化教學(xué)管理及學(xué)員服務(wù)，助力更多學(xué)員實(shí)現(xiàn)高薪夢(mèng)想。