第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示：

首先是position:absolute, 固定布局，top:50%,left:50%,你会发现这个块状元素并没有居中，

但是块状元素的左上角是相对于画面居中的，transform:translate(-50%, -50%)的作用是相对于块状元素本身发生位移，分别会向左向上移动块状元素自身的50%，这时你会发现块状元素的中心位置移到了原来的左上角位置，所以居中了

当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置

 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置

在hover状态下，让容器从一个正方形慢慢过渡到一个圆形，而整个过渡是先加速再减速，也就是运用ease-in-out函数

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */

transition-property:指定过渡或动态模拟的CSS属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间

linear             规定以相同速度开始至结束的过渡效果(匀速)

ease             规定慢速开始，然后变快，然后慢速结束的过渡效果（相对于匀速，中间快，两头慢）

ease-in     规定以慢速开始的过渡效果（相对于匀速，开始的时候慢，之后快）

ease-out     规定以慢速结束的过渡效果（相对于匀速，开始时快，结束时候间慢，）

ease-in-out     规定以慢速开始和结束的过渡效果（相对于匀速，（开始和结束都慢）两头慢）

cubic-bezier(n,n,n,n)     在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

CSS3 Multiple backgrounds从字面而知，CSS3的多背景，其主要作用就是给同一个元素设置多个背景图像，换句话说，就是在同一元素上可以设置除background-color外多个background的其它属性，因为一个元素只具备一个背景色，但自从有了CSS3后，可以让同一个元素同时具有多个背景图像，并可以给多个背景图像设置相同或不相同的background-(position||repeat||clip||size||origin||attachment)。前面几句可能归纳的有点拗口，不太好理解，后面大家可以通过具体的实例来增加对他的理解。此时或许有朋友会问，那这个多背景我们在样式中要写backgrouds还是一样的background呢？这个问题问得很好，在以前读书学英语时，复数往往会多一个“s”，那我在这里大声告诉大家，CSS3的多背景我们不使用“backgrounds”而是继续使用"backgroud"，况且W3C也没有“backgrouds”,至于具体的语法如下所示：

  background ： [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],*
  也可以分解成：
  background-image: url1,url2,...,urlN;
  background-repeat: repeat1,repeat2,...,repeatN;
  background-position: position1,position2,...,positionN;
  background-size: size1,size2,...,sizeN;
  backrgound-attachment: attachment1,attachment2,...,attachmentN;
  background-clip: clip1,clip2,...,clipN;
  background-origin: origin1,origin2,...,originN;
  background-color: color;

取值说明：

1、background-image:此值用来设置元素的背景图片，可以使用相对地址或绝对地址索引背景图片，详细参考w3c的Background-image；

2、background-repeat:此值用来设置元素的背景图片的平铺方式，其默认值为repeat，详细参考w3c的background-repeat；

3、background-position:此值用来设置元素的背景图片的定位起点，其默认值为left top,详细参考w3c的background-position；

4、background-size: 此值用来设置元素的背景图片的尺寸大小，其默认值为auto，详细参考《CSS3 Background-size》；

5、background-attachment:此值用来设置元素的背景图片是否为固定显示，其默认值为scroll,详细参考background-attachment；

6、background-clip：此值用来控制元素的背景图片显示区域，其默认值为border-box，详细参考《CSS3 Background-clip》；

7、background-origin:此值用来控制元素的背景图片position的默认起始点，其默认值为padding-box,详细参考《CSS3 background-origin》;

8、background-color:此值用来设置元素的背景色，详细参考w3c的background-color。

其中background-image需要多个，但多个图片之间使用逗号隔开,而其他属性可以选择一个或多个，如果有多个背景图片时，其他属性只有一个时，那么表示所有背景图片应用了相同的属性设置，但background-color只能设置一个，如果你设置多少background-color将是一种错误的语法设置。

兼容的浏览器：

CSS3 Multiple Backgrounds在各支持的浏览器下都是统一写法，不需要加上自己的前缀，但如果你使用background-size,background-clip,background-origin时，还是需要另提出写上各浏览器的前缀。

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-multiple-backgrounds © w3cplus.com

opacity: 1;透明度100%

z-index:1; 叠在上面

vertical-align: middle; 垂直居中

水平向右为X轴，垂直向下为Y轴

-webkit-transform: skew(15deg) rotate(20deg);
-moz-transform: skew(15deg) rotate(20deg);
transform: skew(15deg) rotate(20deg);

要一起写，因为后面的会覆盖前面的效果，只能一起写才能同时起作用。

在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。

Matrix()与translate()关系：translate(x,y)对应Matrix(1,0,0,1,x,y);

Matrix()与scale()关系：scale(x,y)对应Matrix(x,0,0,y,0,0);

Matrix()与rotate()关系：rotate(x)对应Matrix(cos(x),sin(x),-sin(x),cos(x),0,0)

Matrix()与skew()关系：skew(x,y)对应Matrix(1,tan(x),tan(y),1,0,0)


Matrix(a,b,c,d,e,f);

如果只表示偏移，matrix只要关注参数e和f就好，前面几个参数大家随意；

如果表示缩放，则只关注参数a和d，a表示x轴，d表示y轴缩放；

如果表示旋转，abcd分别表示cosθ,sinθ,-sinθ,cosθ；

拉伸就用到b,c两个参数，分别表示tan(x)和tan(y)。

position的top:50%;left:50%;是相对于界面宽高的。
translate的-50%,-50%是相对于div本身宽高的。相当于先将div左上角居中，再将div中心点居中。

1. top：50%，left：50%，是将色块的左上角定位在了屏幕的中央，但是，整体并不在中央；
2. translate的百分比是根据自身的宽度和高度来定的，translate(-50%,-50%) 配合 top：50%，left：50% 实现了居中

position:absolute;
top:50%;
left:50%;
这几行的作用是div的左上角成为body的中央；
transform:translate( -50%, -50%);
这行的作用是向左，向上 平移自身宽度，高度的百分之50。这也达到了自身div的中心点和div中心点重合的作用。