(整理中······)
一、选择器
新增的伪类
1、p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
2、p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
3、p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
4、p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
5、p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
二、盒子模型
新增了边框属性:
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-)
三、背景
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
四、文本效果
1、text-shadow 可向文本应用阴影
支持浏览器:IE10、Firefox、Chrome、Safari、Opera
2、word-wrap 允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分
支持浏览器:所有主流浏览器
五、字体
@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
2D转换方法:
3D转换方法:
2、transform-origin 允许你改变被转换元素的位置
七、过渡与动画
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-)
八、多列布局
九、用户界面