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