CSS3新特性

1.CSS3的选择器

属性选择器

E[attr]:选择具有attr属性的E元素
E[attr=“val”]：选择具有attr属性，并且属性值是val的E元素
E[attr^=“val”]：选择具有attr属性，并且attr属性值是以val开头的E元素
E[attr$=“val”]：选择具有attr属性，并且attr属性值是以val结尾的E元素
E[attr*=“val”]：选择具有attr属性，并且attr属性值包含val的E元素

结构伪类选择器

E:first-child：匹配父元素里面的第一个子元素E
E:last-child：匹配父元素里面的最后一个子元素E
E:nth-child(n):匹配父元素里面的第n个子元素E
E:first-of-type:匹配指定类型E的第一个
E:last-of-type：匹配指定类型E的最后一个
E:nth-of-type(n)：匹配指定类型E的第n个

动态伪类选择器

:link   
:visited
:hover
:active
:focus
:target
当我们点击锚点链接时，对应id的元素会显示在视口

伪元素选择器

element::before
定义：在元素的内容前面插入新内容，常与content配合使用
element::after
定义：在元素的内容后面插入新内容，常与content配合使用

2.圆角

border-radius

3.边框

border-image:url(border.png) 30 30 round; 
border-image: 图片url 偏移量 图像边界的宽度  铺满方式

重复（repeat）、拉伸（stretch）、铺满（round）

4.背景

background : bg-color  bg-image  bg-position/bg-size  bg-repeat   bg-attachment 

5.阴影

text-shadow

text-shadow: 水平阴影，垂直阴影，模糊半径，阴影的颜色

box-shadow

box-shadow: x轴偏移 y轴偏移 模糊半径 阴影扩展 阴影颜色

6.渐变

6.盒子模型

box-sizing:content-box;盒子大小：border + padding + width(以前默认的) 
box-sizing:border-box;盒子大小 : width

7. 字体特性

@Font-face 特性，Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

8. 多列布局 （multi-column layout）

兼容性不好，还不够成熟。还不能用在实际项目中。

column-count属性

column-width属性

column-gap属性

8.css弹性盒子模型

9. CSS3动画

1) Transition 过渡

2) Transforms 2D转换

3) Transforms 2D转换

4) Animation动画

10. @media媒体查询