css3新特性：
- border-radius:6px(圆角)；
- box-shadow:10px 10px 5px 1px #888;(水平阴影，垂直阴影，模糊距离，阴影尺寸，阴影颜色)
- text-shadow:10px 10px 10px #888;(水平阴影位置，垂直阴影位置，模糊距离，阴影颜色)
- rgba(0,0,0,0.6)背景色，比opacity:0.6,IE:filter:alpha(opacity=60)好处是透明度不继承
- css3图片背景：background-size:30px 60px;background-origin:content-box(背景图相对于内容框来定位)，border-box(背景图相对于边框来定位)
- transform:translate(10px);(盒子水平移动10px)；transform:translate(10px,20px);(盒子水平移动10px，垂直移动20px)
- transform:rotate(30deg)(盒子旋转30度)
- transform:scale(2,4)(盒子缩放，宽度变为原始尺寸的2倍，高度变为原始尺寸的4倍)
- transform:skew(30deg,40deg)(元素翻转给定的角度)
- css3过渡：div{width:100px;height:100px;transition:width 2s,height 2s;transform:rotate(180deg);} div:hover{width:200px;hight:200px;}
- css3动画：@keyframes定义动画的名称和时长，定义动画@keyframes myfirst {from {background-color:blue;} to {background-color:red;}}或者@keyframes myfirst {0% {background-color:blue;} 100% {background-color:red;}}；调用动画 div{animation:myfirst 3s}
css伪类：
- 锚伪类：a:link{}(未被访问状态);a:visited{}(已访问状态);a:hover{}(鼠标悬停状态);a:active{}(鼠标点中激活链接那一下)；注意a:hover必须在a:link,a:visited之后才是有效的；a:active必须放在a:hover之后才是有效的。
- 大致有这些：:root,:not(),:empty(),:first-child,:last-child,:nth-child(n),:first-of-type,:last-of-type,:nth-of-type(n),:only-child,:only-of-type,:link,:visited,:hover,:active,:focus,:enabled,:disabled,:checked,:read-only,:read-write
- :root选择元素所在文档的根元素，在HTML中，根元素始终是html元素
- :not()否定选择器，选择除某个元素之外的所有元素,比如除了footer之外的所有元素背景色为粉色；div:not([id="footer"]){background:pink;}
- :empty用来选择没有任何内容的元素，空格都不行
- tr:nth-child(2n+1);tr:nth-child(odd);匹配奇数行的tr；tr:nth-child(2n);tr:nth-child(even);匹配偶数行的tr；
- :only-child匹配的元素的父元素有且仅有一个子元素；比如ul下面只有一个li，选择这个li元素的背景色为蓝色；li:only-child{background:blue;}
- 用户行为伪类：:focus输入焦点的元素添加样式，:hover鼠标悬停的效果，:active用户点击元素那一下的效果
- UI元素状态伪类：:enabled（可输入状态）,:disabled（不可输入状态，禁用input元素，input置灰）,:checked主要针对HTML中的Form元素操作选中状态（仅适用于单选按钮或者复选框）；input[type="text"]:disabled{background:#ddd;}；<input type="radio" checked="checked" value="male" name=""/>;<input type="checkbox" checked="checked" value=""/>
- css3新添加的p:first-of-type与css2的p:first-child的区别：（该父元素中，所有的第一个p元素）（要求第一个元素，标签必须是p）
- p:last-of-type（父元素中，所有p元素的最后一个）；p:only-of-type（父元素只有一个p标签，有其他标签无所谓，只要保证只有一个p）；p:only-child区别，要求父元素只有唯一的p元素，并且必须只有这一个元素。
- p:nth-child(2)（父元素的第二个子元素，而且该子元素为p标签）
- 区别：css3的xxx-of-type只需要满足一个条件，子元素的位置；css2的xxx-child有两个条件，子元素的位置和元素类型
css伪元素：
- :before（在元素内容前面插入新内容）,:after（在元素之后插入新内容），这两个伪类特有的属性content，举例：p:before{content:"你好，我是加在p标签内容前面的内容"}
- :first-line（向文本的首行添加特殊样式）,:first-letter（向文本的第一个在字母添加特殊样式）
- css3中为了区分伪元素和伪类，规定伪元素使用双冒号::，::before,::after,::first-line,::first-letter