CSS3基础整理（3月9号）

参考W3School内容整理

CSS3根据特征可以分为：动画属性，背景属性，边框属性，Box属性，Color属性，尺寸属性，可伸缩属性，字体属性，文本属性，内容生成，Grid属性，超链接属性，列表属性，外边距属性，内边距属性，多列属性，定位属性，打印属性，表格属性，2/3D转换属性，过渡属性，用户界面属性等。

1.动画属性，动画属性是CSS3新增加的属性，这样很多以前通过js实现的效果 通过CSS就可以实现了。 

　　　　动画属性中包括：@keyframes(规定动画),支持情况（IE9以及之前不支持，最新的Firefox支持，opera chrome以及Safari需要加前缀）

animation（动画属性简写）, 支持情况（IE9以及之前不支持， chrome以及Safari需要加前缀）

animation-name（@keyframes的名称）,

animation-duration（周期 单位s/ms）,

animation-timing-function(速度曲线：默认ease 慢-快-慢,linear 匀速,ease-in 低低速开始，ease-out 低速结束，ease-in-out),

animation-delay(是否延迟，默认为0，单位秒or豪秒),

animation-iteration-count（规定播放次数 默认1）,

animation-direction（规定下一周期是否逆向播放，默认 normal ,alternate 反向轮流播放）,

animation-play-state（规定动画是否正在运行，默认 running，paused是暂停）,支持情况（IE9以及之前不支持， chrome以及Safari需要加前缀）

animation-fill-mode（规定对象动画时间之外的状态 none 不改变，forwards 动画结束之后显示的是最后一帧，backwards在设置了animation-delay后有效，动画开始之前显示第一帧（from中定义）,both是forwards与backwards的集合），支持情况（IE9以及之前不支持， chrome以及Safari需要加前缀）

.foo{
    -webkit-animation:anima 2s ease 1s 2 alternate;
　　 animation:anima 2s ease 1s 2 alternate;

　　-webkit-animation-fill-mode:both;
　　animation-fill-mode:both;}

@-webkit-keyframes anima{
    from{
　　　　/*.......*/
　　}
　　to{
　　　　/*.......*/
　　}
}    

@-o-keyframes anima{
    from{
　　　　/*.......*/
　　}
　　to{
　　　　/*.......*/
　　}}  

@keyframes anima{
    from{
　　　　/*.......*/
　　}
　　to{
　　　　/*.......*/
　　}
}      

背景属性，背景属性是在CSS中应用非常多，支持（IE8之前的不支持新增的size和orgin），其

　　主要包括background （在一个声明中设置左右的属性，通常先设置background-color，然后是background-image。。。在CSS3支持多重设置背景图像，之间使用逗号隔开，写在前的背景图显示在上方），

　　background-attachment(设置背景图像是否随页面的其余部分滚动，取值有scroll（默认) fixed(背景图像固定不动)和inherit)，

　　background-color（设置背景图像），

　　background-image（设置图像  URL（**.jpg）），

　　background-position(设置背景图像的起始点，取值有[top bottom center left right]中的两两组合，如果只指定一个参数 默认为后一个center，x% y%，以左上角为标准指定位置，如果只指定一个，另一个默认为50%，还有就是 x pox ypox,像素何以和%混用)，

　　background-repeat（是否重复，取值有 repeat no-repeat repeat-x repeat-y inherit），

　　background-clip（针对已经定位好的背景图片进行裁切，取值有content-box,padding-box,border-box），

　　background-origin（设置定位区域，取值有content-box,padding-box,border-box，针对左上角），

　　background-size（设置大小，取值有length,如果只设置一个，则后一个为auto，percentage，cover图片扩大至填充整个页面，contain 把图像扩大至最大尺寸，使其长度宽度适应于内容区域）。

　　渐变 这是在background中的一个取值，-*- linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )   point为[top bottom right center left]中的一种或是两两组合，也可以是角度。*为webkit moz ms o  ms只支持IE10和IE11。 radial-gradient 径向渐变 在chrome和Safari中需要前缀。radial-gradient（at x y ,color [,color]），-webkit-radial-gradient(x y, color[,color]).

边框属性，

Box属性，

Color属性，

尺寸属性，

可伸缩属性，

字体属性，

文本属性，

内容生成，

Grid属性，

超链接属性，

列表属性，

外边距属性，

内边距属性，

多列属性，定

位属性，

打印属性，

表格属性，

2/3D转换属性，

过渡属性，

用户界面属性，