CSS3的新特性

简单地说，css3是css2的一个升级版，它并没有采用总体结构，而是采用了分工协作的模块化结构。

兼容性问题

通过 http://caniuse.com/ 可查询CSS3各特性的支持程度，一般兼容性处理的常见方法是为属性添加私有前缀，如不能解决，应避免使用，无需刻意去处理CSS3的兼容性问题。
常用的私有前缀

谷歌、苹果： -webkit-
ie： -ms-
火狐：-moz-
欧朋：-o-

选择器：#

属性选择器：

E[title] 选中带有title属性的E标签
E[title="box" ] 选中带有title属性的E标签,并且值为box
E[title^="box"] 选中带有title属性的E标签,并且值以box开始
E[title$="box"] 选中带有title属性的E标签,并且值以box结尾
E[title*="box"] 选中带有title属性的E标签,并且值包含box

伪类选择器：（通过结构进行筛选）#

E:first-child 选中父盒子中的第一个子元素
E:last-child 选中父盒子中的最后一个子元素
E:nth-child(n) 选中父盒子中的第N个子元素
E:nth-last-child(n) 从后向前选中第n个
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E
E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E

E:only-child(n)     匹配父元素仅有的一个子元素E

其他伪类：#

E:empty 选中内容为空的E元素
E:not('.box'); 排除类名的为box的E元素
E:target 表示E元素被激活是的状态，配合锚点使用
伪元素选择器：#
::first-line 第一行
::first-letter 第一字母
::selection 表示选中的区域（背景颜色和字体颜色）

渐变：

linear-gradient 线性
radial-gradient 中心向外
例： background:radial-gradient(30px at 50px 50px,yellow,pink);
例：background-image: linear-gradient(135deg, red 0%,red 25%,blue 25%, blue 50%, green 50%, green 75%,pink 75%, pink 100% );

3.jpg

颜色：

1、opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；
2 、transparent 不可调节透明度，始终完全透明
3， RGBA

Red、Green、Blue、Alpha即RGBA
R、G、B 取值范围0~255
A：不具有继承性，即不会影响子元素的透明度
4，HSLA
h：色调 0-360
s:饱和度 0-100%
l:亮度 0-100%
a:alpha 0-1

阴影：

例：box-shadow: 5px 5px 5px #CCC
例：text-shadow：2px 2px 2px #ddd;

background-origin 参考原点

border-box 以边框做为参考原点；
padding-box 以内边距做为参考原点；
content-box 以内容区做为参考点；

剪切：

background-clip，可以设置对背景区域进行裁切，即改变背景区域的大小

过度：

transition-property 设置过渡属性
transition-duration 设置过渡时间
transition-timing-function 设置过渡速度
transition-delay 设置过渡延时

transform变换：

记得要和transition一起使用才有动画效果
缩放scale(x, y)
.a{
width: 500px;
height: 200px;
background-image: linear-gradient(135deg, pink,green);
transition: all 2s;
}
.a:hover{
transform: scale(1.2,0.5);
}
移动translate(x, y)
transform:translate(300px,-50%);
旋转rotate(deg)
transform: rotate(-50deg);
透视（perspective）【3d】
要给要设置透视的盒子的父盒子加 perspective :200px;
再给本身设置旋转角度方向 transform:rotateY(52deg);

3D变换：

让子盒子保持真正的3d效果，需要给父盒子设置属性；
transform-style:preserve-3d;
关于3d旋转方向的问题：对着正方向去看：都是顺时针旋转的；
3d变换属性：
rotateX：沿着x轴旋转
rotateY: 沿着y轴旋转
rotateZ: 沿着Z轴旋转
translateX: 沿着x轴移动
translateY: 沿着y轴移动
translateZ: 沿着Z轴移动必须配合透视使用

动画：

必要元素：
a、通过@keyframes指定动画序列；
b、通过百分比将动画序列分割成多个节点；
c、在各节点中分别定义各属性
d、通过animation将动画应用于相应元素；
@keyframes gun{
0%{
transform: rotateX(720deg) rotateY(0deg) rotateZ(0deg);
}
50%{
transform: rotateX(720deg) rotateY(720deg) rotateZ(720deg);
}
100%{
transform: rotateY(720deg) rotateZ(0deg) rotateX(0deg);
}
}

伸缩布局：

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
方向：默认主轴从左向右，侧轴默认从上到下

等分宽度或高度##

先给父盒子设置display: flex;
再给子盒子设置 flex: 多少等分;
在父盒子设置
从左到右
flex-direction: row;
从右到左
flex-direction: row-reverse;
从上到下
flex-direction: column;
从下到上
flex-direction: column-reverse;

不设置等分时

justify-content:主轴对齐方式
flex-start:从主轴开始的方向对齐
flex-end:从主轴结束的方向对齐
center ：居中
space-around: 在主轴方向上平分主轴的空间
space-between: 在主轴方向上两端对齐
align-itmes: 侧轴上对齐方式
flex-start:从侧轴开始的方向对齐
flex-end:从侧轴结束的方向对齐
center ：居中对齐
stretch:拉伸（拉伸子盒子）

是否换行##

换行 flex-wrap：wrap；
不换行 flex-wrap：nowrap；（默认宽高会被压缩，都显示在同一行）
给父盒子设置的，要在子盒子宽高之和大于父盒子的宽高是才有效果

字体图标

常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体包，然后就可以像使用文字一样使用图标了
优点
1、将所有图标打包成字体库，减少请求；
2、具有矢量性，可保证清晰度；
3、使用灵活，便于维护；

Font Awesome 使用介绍 http://fontawesome.dashgame.com/
定制自已的字体图标库
http://iconfont.cn/
https://icomoon.io/
SVG素材 http://www.iconsvg.com/