css3新增加的属性
（1）渐进增强和优雅降级
渐进增强：一开始只构建站点最少特性，然后不断的对不同的浏览器追加不同的功能；
优雅降级：一开始就构造站点的完整功能，然后针对浏览器进行测试和修复；
（2）新增的一些属性
1、text-shadow（文字阴影,顺序不能变）:5px(水*位置) 5px(垂直位置) 5px(阴影度) #666(颜色);
2、box-shadow（盒子阴影,顺序不能变）:5px(水*位置) 5px(垂直位置) 5px(阴影度) 40px(模糊半径) #666(颜色);
3、word-break(允许单词内换行):normal/keep-all/break-all;
4、word-wrap(单词内不会换行):normal/break-word;
5、单元格间距：border-spacing
6、合并相邻单元格边框：border-collapse:separate/collapse;
7、无内容时单元格的设置：empty-cells:hide/show;
8、添加组分割线：rules:rows(位于行之间的线条)/cols(位于列之间的线条)/all(全部的线条)/none/group(行组和列组之间的线条);
9、指定背景的显示范围：background-clip
background-clip:border-box/padding-box/content-box;
10、背景图*铺的起点：background-origin
background-origin:border-box/padding-box/content-box;
11、背景图的大小：background-size
background-size:length/percentage/cover/contain
12、设置圆角：border-radius
13、用图片来创建边框：border-image
（3）flex容器属性（添加在父级元素上）
1、display:flex/inline-flex;设为flex布局以后子元素的float，clear和vertical-align属性将失效；
2、flex-direction属性：决定主轴的方向（即项目的排列方向）
flex-direction:row/row-reverse/column/column-reverse
3、flex-wrap属性：定义子元素是否换行显示
flex-wrap:nowrap/wrap/wrap-reverse
4、flex-flow属性：是flex-direction和flex-wrap的简写形式，默认值为row nowrap;
5、justify-content属性：定义了项目在主轴上的对齐方式
justify-content:flex-start/flex-end/center/space-between/space-around
6、align-items属性：定义项目在交叉轴上的对齐方式
align-items:flex-start/flex-end/center/baseline/stretch
7、align-content属性：定义了多根轴线的对齐方式对于单行子元素，该属性不起作用
align-content:flex-start/flex-end/center/space-between/space-around/stretch
（4）flex项目属性（添加子元素上）
1、order属性：定义项目的排列顺序，数值越小，排列越靠前，默认为0；
2、flex-grow属性：定义项目的放大比例，默认为0，即如果存在剩余空间也不放大，如果所有项目的flex-grow的属性都为1，则它们将等分剩余空间，如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他多一倍；
3、flex-shrink属性：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小；如果所有项目的flex-shrink的属性都为1，则它们将等比缩小，如果一个项目的flex-grow属性为0，其他项目都为1，则空间不足时前者缩小；
4、flex-basis属性：定义了在分配多余空间之间项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余的空间，它的默认值为auto，即项目的本来大小；
5、flex属性：是flex-grow，flex-shrink和flex-basis的简写，默认值为0,1，auto；
6、align-self属性：align-self:auto/flex-start/flex-end/center/baseline/strectch。
（5）css3多列布局
1、column-count：分栏的个数
2、column-width：分栏的宽度
3、column-gap：分栏的间距
4、column-rule：分栏的边框
5、column-span:all/1;合并分栏，火狐不支持，前面四个加在父元素上，这个属性加在子元素上
（6）css3选择器
1、属性选择器（IE6不支持）
E[attr="value"]：指定属性名，并指定了改属性的属性值；
2、结构伪类选择器
a、first-child
b、last-child
c、nth-child
d、nth-last-child
e、nth-of-style
f、nth-last-of-style
g、first-of-type
h、last-of-type
i、only-child
j、empty
3、否定选择器 :not() IE6-8不支持 可以让你定位不匹配选择器的元素
4、选择文档的根元素 :root
5、:target 选择器可用于选取当前活动的目标元素
6、:lang 和a标签搭配使用 是你有能力为不同语言定义特殊规则
7、层次选择器
a、后代选择器（E F）
b、子元素选择器（E>F）
c、相邻兄弟选择器（E+F）紧接着的下一个兄弟才可以
d、通用兄弟选择器（E~F）
（7）渐变
1、background:linear-gradient(to top,blue,red) 兼容写法：background:-wbkit-linear-gradient(bottom,blue,red)
2、gradient分为linear-gradient（线性渐变）和radical-gradient（径向渐变），重复的线性渐变：repeat-linear-gradient()，重复的径向渐变repeat-radical-gradient()
3、radical-gradient( circle,20px 30px,red,blue)中的20px 30px 指的是圆心的水*和垂直位置 linear-gradient(20px 30px,red,blue)中的20px 30px 指的是渐*的水*和垂直半径
4、线性渐变
a、从上到下(默认情况下)：background：linear-gradient(red,blue);
b、从左到右：background：linear-gradient(to right,red,blue);
c、对角：background：linear-gradient(to bottom right,red,blue)
5、径向渐变
a、颜色节点均匀分布（默认情况）：background：radical-gradient(green,red,blue);
b、颜色节点不均匀分布：background：radical-gradient(green 15%,red 5%,blue 60%);
c、设置形状：background：radical-gradient(circle，green,red,blue);
（8）模糊和倒影
1、模糊：filter:blur(10px)
2、倒影（只有webkit内核支持，目前仅在Chrome，Safari，opera浏览器下支持）
-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));
3、用线性渐变给图片加遮罩效果；用于遮罩的图片必须是png格式；
（9）动画（css3属性中有关制作动画的三个属性transition，transform和animation）
1、transition
a、transition-property:需要过渡的样式
b、transition-duration：运动时间
c、transition-delay：延迟时间
d、transition-timing-function：运动形式 ease(默认,慢速开始，然后变快，然后慢速)/linear(匀速)/ease-in(快速)/ease-out(减速)/ease-in-out(先加速后减速)/cubic-bezier(x1,y1,x2,y2)贝塞尔曲线
e、steps：实现一个关键逐帧动画功能
2、transform属性向元素应用2D,3D效果，该属性允许我们对元素进行旋转，缩放，移动和倾斜
a、translate()根据x轴和y轴位置给定的参数，从当前位置移动 transform:translate(-150px -150px);
b、rotate()根据给定度数顺时针旋转，负值是允许，这样会逆时针旋转
c、scale 默认为（1,1），进行图片缩放，给负值时，会先旋转再缩放
d、skew 倾斜
f、transform-origin：改变元素基点位置，当有3个参数时，第三个参数只能是数字+单位，不能用left/center/right
3、3D涉及到的属性
a、transfrom-style：指定嵌套元素如何在3D空间中呈现（加在父元素上）
transform-style：flat(表示所有子元素在2D*面呈现)/perserve-3d(表示所有子元素在3D*面呈现);
b、perspective:none/<length>;perspective取值为none或不设置，没有真3D空间；perspective取值越小，3D效果越明显；
c、perspective-origin:决定看东西的角度
d、backface-visibility:visible/hidden;决定背面是否可见
4、animation和@ikeyframes一起用，支持animation动画的只有webkit内核
a、animation-property:需要过渡的样式
b、animation-duration：运动时间
c、animation-delay：延迟时间
d、animation-timing-function：运动形式 ease(默认,慢速开始，然后变快，然后慢速)/linear(匀速)/ease-in(快速)/ease-out(减速)/ease-in-out(先加速后减速)/cubic-bezier(x1,y1,x2,y2)贝塞尔曲线
e、animation-iteration-count：循环次数
f、animation-direction(运行方向):normal/alternate;
g、animation-play-state:paused;鼠标放上去动画停止
h、animation-fill-mode:backwards(默认)/forwards(停在最后一帧);动画结束之后的样子
