CSS3知识点
CSS3提供了强大而且精准的选择器，提供了多种背景填充方案、可以实现渐变颜色、改变元素形状、角度、加阴影效果，新的报纸布局、弹性盒子，ie6混杂模式的盒子模型，新的计量单位，动画效果等等。
CSS3有很大的兼容性问题，IE9以下不兼容CSS3.0，IE10才开始全面支持CSS3。而由于浏览器厂商的不同，我们在使用CSS3的时候，有时候需要单独为每一种浏览器写兼容。
而兼容的方式就是在属性前面加上前缀：
css3 兼容性
| 前缀 | 浏览器 |
| -webkit | chrome、safari |
| -moz | Firefox |
| -ms | IE |
| -o | opera |
css3 选择器
css3选择器:
1.css3属性选择器 ele[attr=”*(任意位置),^(开头),$(结尾)”]
2.css3伪类选择器
第一组：同一父级下的某个子元素
:first-child
:last-child
:nth-child(n) 同一父级下的第几个子元素 （正着来）
:nth-last-child(n) （倒着来）
（选择li中的第一个文件，背景为蓝色）
第二组：（常用）一类中的某个元素
:first-of-type
:last-of-type
:nth-of-type(n) 一类中的第几个元素 （正着来）
:nth-last-of-type(n) （倒着来）
3.css3条件选择器
E>F F是E的直接子元素
E+F F是E的兄弟节点，而且是E后面的第一个
E~F F是E后面的兄弟节点
CSS3属性
1.border-radius
这个属性是设置圆角的，border-radius: 10px; 这个css属性就可以让这个元素的四个角都变成半径是10px的四分之一圆。
border-radius是一个复合属性，它是由border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius四个属性复合而来。
当我们写一个值的时候，是这四个角都是一样的值。
当我们写两个值的时候，右上角和左下角一样，左上角和右下角一样，而且第一个值代表的是左上角和右下角的圆角度，第二个值代表右上角和左下角的圆角度。
当我们写三个值的时候，第一个值是左上角的值，第二个值右上角以及左下角的值，第三个值是右下角的值。
当我们写四个值的时候，分别是左上、右上、右下、左下的圆角度。
并且这四个属性每一个属性都有两个值，分别代表这个角的两条边，可以设置不同的值。
半圆：
div {
height:50px;
width: 100px;
border-top-left-radius : 50px;
border-top-right-radius: 50px;
background-color: red;
}2.box-shadow
这个属性是为盒子模型设置阴影的，不过比较消耗性能，用多了会使页面变卡。对于需要很多阴影的时候，我们可以用两个同样的盒子模型，通过改变底层盒子的位置来模拟阴影效果。
box-shadow的属性值包括：
box-shadow: x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]
其中后面带方括号的属性都可选属性，前两个偏移量是一定要写的属性值。
投影方式默认是向外投影，如果要向内投影的话，就把属性值改为inset。
同一个盒子可以加多个阴影，中间用逗号隔开。
div {
height:50px;
width: 100px;
background-color: green;
box-shadow: 10px 10px grey ;
}3.border-image
这个属性是设置边框背景图片的
这也是一个复合属性，属性值包括：
border-image: url(xxx.png) number(默认单位是px) repeat / round / stretch
number为截取指定图片四周的宽度作为border的背景填充部分。number为一个值的时候是四个值的复合写法。
第一个值代表从上往下截取多少像素作为上边，然后是右边，下边和左边，不填像素也可以。
这个属性首先会固定四个角的图片，然后四边除了角的地方会遵循后面我们写的方式：
repeat是重复中间部分。
round 如果可以放下两个完整图片，就放两个，如果放不开就只放一个拉伸的图片。
stretch 中间只放一个拉伸的图片
4.rgba
我们在css2知道rgb是色值的意思，这里多了一个a代表的是alpha透明度的意思，第四个值alpha的取值范围是[0-1]。
这个属性基本等同于opacity属性和rgb属性的组合形式。
表示的是30%不透明度的红色背景
5.background: linear-gradient
css3可以让我们用渐变的颜色来填充背景颜色。
(1) linear-gradient([direction], color[percent], color[percent], …); 线性渐变
direction是渐变的方向，填写的是角度值，比如180deg，70deg等。当我们的方向是正方向的时候，我们可以用to direction来代替，比如正下方：to bottom，正右方：to right等。
后面的都是填的颜色，而颜色的百分比的意思不是说这个颜色在这个区域内占据的空间，而是到达了这个点之后颜色变成了我们制定的颜色，比如一个div的高度是200，那么我们设置50%的意思是在100的时候颜色变成了我们设置的颜色，而不是说我们设置的颜色占了100大小的意思。
div {
height:50px;
width: 100px;
background: linear-gradient(0deg, red, blue);
}
(2) radial-gradient(shape at position, color[percent], …);径向渐变
径向渐变即我们平常理解的放射状渐变，第一个值shape设置放射的形状，可以是原型circle、可以是椭圆ellipse。
position是设定一个在区域内开始的坐标点，即圆心位置，可是是两个值，也可以是一个值，一个的时候，第二个数默认是50%。这个值可以是百分数，也可以是像素和方位值。
后面的颜色部分和线性渐变设置颜色即可。
这里注意的是，这个属性一定要写在background属性里面，写在background-color属性里面是不对的。
background:radial-gradient(50px, red,blue);6.word-wrap
这个属性是文字边界换行的意思，格式为：
word-wrap:break-word;
一旦到达边界，就会强制换行。
我们在最开始的html部分讲到过，在一个div里面输入一连串的英文的时候，由于浏览器无法识别英文的分隔符，所以最后这一串英文会超出div的大小。
现在设置这个属性之后，到达div的边界的时候就会强制换行。
7.font-face
这个属性可以让我们引入自己的字体包。
@font-face{
font-family: myFitstFont;//给引入的字体起名字
src:url('sldjf.ttf'),//引入地址的字体包
url('alsdf.eat') format('eat')
//同一种字体，不同平台的，引入多次 后面的format是引入的格式，这里就是eat
}
8.text-shadow
这个属性是文本阴影的意思，和盒子阴影类似，也是比较消耗性能，但是没有盒子那么消耗。
格式为：
text-shadow: x轴偏移量 y轴偏移量 [虚化程度] [颜色]