CSS3
css3更新的一些新特性，给界面带来了更加丰富的效果，也给写代码带来了很多的便利。css3的新特性有更强大的css选择器，更多的颜色格式和透明度的设定，多栏布局的实现，多背景图的效果，文字阴影、开放的网络字体类型、圆角、边框背景图片、盒子阴影、媒体查询等丰富效果，深入学习以后css3会是我们写网页更加方便去、更加强大的助手。
1.css3的新选择器 常用的用蓝色标记
伪类选择器有
1）：link 设置超链接没有被访问之前的样式。
2）: visited 设置超链接被访问过的样式
3） :hover 设置元素在其鼠标悬停时的样式。
4） :active 设置元素在被用户在鼠标点击与释放之间发生的事件时的样式。
5）:focus 聚焦（onfocus时）时的样式。
6）:lang(fr) 内容里面包含fr的时候增加样式
7）:not(s) 匹配不含有s选择符的元素。内容里面不包含s的时候增加样式
8）:root 匹配元素在文档的根元素。在HTML中，根元素永远是HTML
9）:first-child 匹配父元素的第一个子元素。
10）:last-child 匹配父元素的最后一个子元素。
11）:only-child 匹配父元素仅有的一个子元素。
12）:nth-child(n) 匹配父元素的第n个子元素
13）:nth-last-child(n) 匹配父元素的倒数第n个子元素
14）:first-of-type 匹配父元素下第一个类型为的匹配元素的子元素。
15）:last-of-type 匹配父元素下的所有E子元素中的倒数第一个。
16）:only-of-type 匹配父元素的所有子元素中唯一的那个子元素。
17）:nth-of-type(n) 匹配父元素的第n个子元素。
18）:nth-last-of-type(n) 匹配父元素的倒数第n个子元素。
19）:empty 匹配没有任何子元素（包括text节点）的元素。
20）:checked 匹配用户界面上处于选中状态的元素。
21）:enabled 匹配用户界面上处于可用状态的元素。
22）:disabled 匹配用户界面上处于禁用状态的元素。
23）:target 匹配相关URL指向的元素。
属性选择符 att为属性
1）[att] 选择有att属性的元素
2）[att="val"] 选择具有att属性且属性值等于val的元素。 例如：input[type="text"]
3）[att~="val"] 选择很多属性中 包含一个属性就可以选中
4）[att^="val"] 选择属性以val开头的
5）[att$="val"] E[att$="val"] 选择属性以val结尾的。
6）[att*="val"] 选择具有att属性且属性值为包含val的字符串的E元素。
7）[att|="val"] 选择具有att属性（包含val就会被选中）
伪对象选择器 （此伪对象仅作用于块级元素。前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符，但以前的写法仍然有效。即E:first-letter可转化为E::first-letter）
1）E:first-letter/E::first-letter 设置对象内的第一个字符的样式。 可以用于开头文字设置特别的样式
2）E:first-line/E::first-line 设置对象内的第一行的样式。
3）E:before/E::before 设置在对象前发生的内容。
4）E:after/E::after 设置在对象后发生的内容。
2.颜色 ：rgba格式 rgba(250,250,250,0); 最后一位是透明度
单独设置透明度的属性有 opacity 取值零到1 。设置透明色color：transparent；
3.边框
边框常用的有border-radio 边框圆角 可以设置百分比，也可以设置单位数值。（如果圆角值为50%的时候 该盒子模型会变成圆的）
box-shadow 盒子阴影，可以设置四个值 box-shadow: 10px 10px 5px #888888; 分别是设置阴影x轴偏移、Y轴偏移 和阴影大小 颜色。
边框图片，在css3中可以设置边框为图片，border-image属性，可以使用图像创建一个边框。border-image：url(border.png) 30 30 round;
4.背景
1）background-image 设置背景图片各种属性，路径 是否平铺等等
2）background-size 设置背景图像的大小。
3）background-Origin
5.css3 2D转换
translate(x,y)以x和y轴平移，单独设置的写法为translateX() translateY()
transform: rotate(30deg); 把元素顺时针旋转30度(deg)
transform: scale(2,4); 拉伸方法，把宽度设置为原来的2倍，高度设置为原来的4倍，也可以分开设定，同上
skew() 翻转，transform: skew(30deg,20deg);沿着x轴翻转30deg，沿着y轴翻转20deg。分开的写法为skew(x-angle,y-angle)；
6.3D转换
transform-origin ： 改变被转换元素的位置。
perspective ： 设置元素被查看位置的视图
7.css3过渡
transition 可以设置过渡的曲线速度
linear 线性过渡
ease 先慢后快
cubic-bezier(n,n,n,n); 设置贝塞尔曲线 可能的值是 0 至 1 之间的数值。
ease-in 以慢速开始的过渡效果
ease-out 以慢速结束的过渡效果
ease-in-out 以慢速开始和结束的过渡效果
8.动画 animation
@keyframes 声明规定动画，然后设置每个阶段效果，参照博客animation实现动画钟表效果。
animation-duration 固定一个动画的完成周期
animation-timing-function 规定动画的速度曲线，参照过渡
animation-fill-mode 当动画没有播放的时候需要的样式
animation-delay 延时播放
animation-iteration-count 规定动画播放的次数
animation-direction 规定动画是否在下一周期逆向的播放
animation-play-state 设置动画是否正在运行或暂停
9.css3 弹性盒子
后面有单独一篇介绍flex
