· 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培训服务经验，采用全程面授高品质、高体验培养模式，拥有国内一体化教学管理及学员服务，助力更多学员实现高薪梦想。