参考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]).

.class{
         background:#ff0000 url(**.jpg) fixed no-repeat 20% 20% ;      background-clip:comtent-box;      background-orgin:padding-box;      background-size:contain;}      .class2{
       background:-webkit-linear-gradient(top let,red,green);　　background:-moz-linear-gradient(top let,red,green);　　background:-ms-linear-gradient(top let,red,green);　　background:-o-linear-gradient(top let,red,green);　　background:linear-gradient(top let,red,green);}

 

边框属性，主要包括

　　border(包含 border-width，border-style，border-color),

　　border-bottom(border-bottom-width,border-bottom-style,border-bottom-color)依次还有，border-left,border-right,border-top。

　　border-style(none  dotted   dashed  solid  double  groove凹线 ridge凸线 Insert outset inherit)

　　border-width(thin medium thick or length)

　　outline(设置轮廓属性 outline-width style color)

　　border-radius(设置圆角 border-  bottom-left  |  bottom-right  | top-left  | top-rght -radius)

　　border-image(设置边框图片 包含三个参数 border-image-source border-image-slice border-image-repeat)

　　border-image-source(url(**.jpg))

　　border-image-slice(类似于clip属性  值为%或是 px,可设置1-4个参数 表示裁切大小)

　　border-image-repeat(round（平铺 比较适用） repeat(重复) stretch（拉伸）)

　　box-shadow(像方框添加阴影，可叠加，h-shadow，v-shadow，blur(模糊距离,从阴影外边算起),[spread(阴影尺寸)] ,color)

Box属性，

　　　　overflow-x overflow-y(取值有 visible hidden  scroll auto inherit等 表示内容如果溢出，是否裁剪)

　　　　overflow-style rotation rotation-point 没有浏览器支持。

Color属性，

　  opacity 设置透明度  0-1

　　color-profile没有浏览器支持。

尺寸属性，

　　height width max-height max-width  min-height min-width

可伸缩属性，支持情况（Firefox 支持替代的 -moz-box-align 属性。Safari、Opera 以及 Chrome 支持替代的 -webkit-box-align 属性。）

　　首先要 display:-moz-box //-webkit-box

box-align(规定如何对齐框的子元素，取值start(对于正常方向的框，每个子元素的上边缘沿着框的顶边放置。对于反方向的框，每个子元素的下边缘沿着框的底边放置) center(均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下。) end baseline(如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐。)  stretch(拉伸子元素以填充包含块) )

　　box-direction （规定如何显示子元素顺序，normal reverse inherit）

　　　　box-flex （规定子元素的可伸缩属性，柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。）

　　　　box-ordinal-group(一个整数，指示子元素的显示次序。数越小，位置越靠前)

　　　　box-orient（子元素是否水平或垂直排列  horizontal vertical ）

　　　　box-pack(规定水平框中的水平位置，以及垂直框中的垂直位置。box-align表现的时候相对于垂直方向，而box-pack是相对于水平方向)

字体属性，

　　font(依次设置 font-style font-variant font-weight font-size font-family)

　　font-style（规定字体样式 normal italic oblique inherit）

　　font-variant(normal small-caps inherit 是否以小型大写字母的方式显示文本)

　　 font-weight(normal bold bolder  lighter 100-900)

　　font-size()　

　　font-family(sans-serif 无衬体字 适合正文阅读  serif 衬体字 适合标题 cursive圆体)

font-size-adjust(字体的小写字母 "x" 的高度与 "font-size" 高度之间的比率被称为一个字体的 aspect 值。当字体拥有高的 aspect 值时，那么当此字体被设置为很小的尺寸时会更易阅读)

文本属性，

　　color(设置文本颜色)

　　direaction(ltr rtl 设置文本方向)

　　letter-spacing（设置字符间距 只能是像素值）

　　line-height（设置行高）

　　text-align(设置文本对齐方式 left right center justify)

　　text-decoration(设置修饰 underline overline line-through blink none)

　　text-indent(设置首行缩进)

　　text-shadow 

　　text-transform(控制大小写  capitalize uppercase lowercase none)

　　white-space(如何处理元素中的空白,normal 空白被忽略 pre 保留空白 nowrap 不换行。)

　　word-spacing(设置单词间距)

　　text-overflow(clip裁剪 ellipsis 应省略号代替)

　　word-wrap(允许长单词或 URL 地址换行到下一行，normal只允许在单词断点处出换行，break-word在长单词中换行)

内容生成，

content（一般用于:before :after 伪类中 "content" 在选择的元素后添加内容，  url(*.jpg) 添加图片， attr(HTML属性名) counter（用来获取计数的值））

　　设置计数器：counter-reset && counter-increment,见下例，用于标签或是Class类，用于ID没有意义。

　　

body {
   counter-reset:section;}h1 {
   counter-reset:subsection;}h1:before{
   counter-increment:section;content:"Section " counter(section) ". ";}h2:before {
   counter-increment:subsection;content:counter(section) "." counter(subsection) " ";}

 

Grid属性， 没有支持

超链接属性，没有支持

列表属性，

　　list-style(list-style-type list-style-position list-style-image的集合)

　　list-style-type(disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none  )

　　list-style-position(inside outside inherit)

　　list-style-image(url(*.jpg))

外边距属性，

　　margin, margin-top margin-left margin-right margin-bottom

内边距属性，

　　padding padding-left padding-right  padding-top  padding-bottom

多列属性，

　　column-count(将内容划分成几列 n  -webkit- -moz-  其他都支持（IE10+）)

　　column-gap(规定列之间的间隔 length  加前缀 与上同)

　　column-rule（规定列之间的样式  width style color  加前缀 与上同）

　　column-span(规定元素应该跨多少列 值有1和all 一般用于标题元素 加前缀 与上同)

　　column-width(列宽 length 加前缀 与上同)

　　column(宽度和列数的简写形式)

定位属性，

position(absolute fixed relative static)

　　top bottom left right

　　float(left right none  inherit )

　　clear(left right both)

　　clip( auto rect(top right bottom left) inherit  rect中的四个值均是相对于左上角来说的，top表示从左上角向下到top值的位置裁切掉上边的内容，bottom表示的是　　左上角向下到bottom值的位置裁切掉之下的内容，还有必须指定position:absolute才有效。)

　　cursor（规定要显示图标的类型 可通过url自定义鼠标类型，不过要在末端定义一个常用的类型，以防不可用。）

　　display( block inline-block inline -webkit-box -moz-box)

　　overflow(visible hidden scroll auto)

　　vertical-align(设置元素的垂直对齐方式 baseline sub super top text-top text-bottom middle bottom  length %)

　　visibility(visiable hidden 虽然隐藏，但是占据空间 collapse)

打印属性，较少使用

表格属性，　较少使用

2/3D转换属性，

　　transform(四种主要内核都要加前缀 参数主要有translate3d(x,y,z)移动元素 scale3d(x,y,z)缩放元素 rotate(angel) 2D中用到的选转  rotate3d(x, y,z,angel) 3d　　选转 x,y,z均是0-1之间的数，是后面指定的angel的倍数，skew(x-angle,y-angle)倾斜转换)

　　　　transform-origin(加四种前缀，参数  x y z 的坐标，设置选转变换中心)

　　

过渡属性，transition( transition-property transition-duration transition-timing-function transition-delay)

用户界面属性，

　　appearance(-moz-  -webkit-  其他浏览器不支持，值中只有button得到支持。)

　　　　box-sizing(-moz- -webkit-用于支持Safari 其他浏览器均支持  content-box 宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。　　　　　　border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度　　　　分别减去边框和内边距才能得到内容的宽度和高度。)

　　　　outline-offset(设置了outline后，对outline进行外移，除了IE均支持。length)

　　　　resize(both none horizontal vertical  IE不支持 必须设定overflow之后才有效，针对的是DIV元素。)