CSS3实战

7 text-shadow 文本阴影

　　（1）text-shadow的属性有四个值：第一个值表示水平位移，正值偏右；第二个值表示垂直位移，正值偏下；第三个值表示模糊半径，该值可选；第四个值表示阴影的颜色，该值可选。

　　比如：text-shadow : 0.1em 0.1em 0.3em #333;

　　颜色值也可以放在最前面，实际上它们的位置是不固定的，但几个数值的顺序不能变。

　　比如：text-shadow : #333 0.1em 0.1em 0.3em ;（和上面的等效）

　　（2）借助阴影效果列表机制，可以利用阴影效果设计燃烧的文字效果：

background : #000;
text-shadow : 0 0 4px white,
              0 -5px 4px #ff3,
              2px -10px 6px #fd3,
              -2px -15px 11px #f80,
              2px -25px 18px #f20; 

　　（3）使用阴影叠加出立体文本特效：

background : #CCC;
color : #D1D1D1;
text-shadow : -1px -1px white,
            1px 1px #333;

　　（4）使用阴影叠加出凹体文本特效（把上面示例中的左上和右下的阴影的颜色颠倒即可）：

background : #CCC;
color : #D1D1D1;
text-shadow : -1px -1px #333,
            1px 1px white;

　　（5）使用text-shadow属性为文本描边（分别为文本的4个变添加一像素的实体阴影）：

background : #CCC;
color : #D1D1D1;
text-shadow : 0 -1px black,
                       1px 0 black,
                       0px 1px black,
                       -1px 0 black;

　　（6）使用text-shadow设置文本外发光特效：

text-shadow : 0 0 0.2em #f87,
               0 0 0.2em #f87;

 8 溢出文本省略——text-overflow属性

white-space : nowrap;/*为应用text-overflow做准备，禁止换行*/
overflow : hidden; /*为应用text-overflow做准备，禁止文本溢出显示*/
-o-text-overflow : ellipsis;   /*兼容Opera*/
text-overflow : ellipsis;   /*兼容IE,Safari(Webkit)(我测试的text-overflow:ellipsis也兼容FireFox)*/
-moz-binding : url('ellipsis.xml#ellipsis');/*兼容Firefox(我测试的，这样设置对Firefox不起任何作用)*/

9  文本换行显示——word-wrap属性

　　word-wrap:是控制是否断词，而不是端字符。word-wrap : break-word;只设置这一句，是不会将英文单词从中间断开的。

　　word-break:当取值为break-all时允许非亚洲语言文本行的任意字内断开，比如允许将英文单词从中间断开。word-break : break-all;和设置word-wrap : break-word;word-break : 　　break-all;效果是一样的，都是允许英文单词从中间断开。当取值为keep-all时表示在中文、韩文、日文中是不允许字断开的。

　　white-space : 当属性取值为nowrap时，强制文本在一行中显示。当取值为pre时，表示显示预定义文本格式。（我测试的结果，也就是在一行中显示全部）

10、  HTML中td元素的nowrap属性表示禁止单元格中的文字自动换行。

　    但使用时要注意的是，td元素中nowrap属性的行为与td元素的width属性有关。如果未设置td宽度，则nowrap属性起作用的，如果设置了td宽度，则nowrap属性不起作用。

11、（1）table-layout : automatic | fixed | inherit。

　　固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。

　　在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。

　　通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。

　　在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。

　　此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容

   （2）empty-cells : show | hide;

　　设置或检索当表格的单元格无内容时，是否显示该单元格的边框。只有当表格行和列的边框独立（例如当border-collapse属性等于separate）时此属性才起作用。

12、HSL色彩模式，色调-饱和度-亮度。三个参数：

　　第一个参数表示色调，0表示红色，60表示黄色...
　　第二个参数表示饱和度，表示该色彩被使用了多少，即颜色的深浅程度和鲜艳程度。取值为0%到100%之间的值，其中0%表示灰度，即没有使用该颜色，100%表示饱和度最高，即颜色最鲜艳
　　第三个参数表示亮度，取值为0%到100%之间的值，其中0%最暗，显示为黑色，50%表示均值，100%最亮，显示为白色。

　　比如：hsl(60,100%,75%)

13、HSLA色彩模式，色调-饱和度-亮度-透明度

　　比如：hsla(60,50%,50%,0.8)

14、RGBA色彩模式，红-绿-蓝-不透明度

box-shadow : rgba(0,0,0,0.1) 0px 0px 8px; /*设置边框阴影效果*/
-moz-box-shadow : rgba(0,0,0,0.1) 0px 0px 8px; /*兼容Mozilla类型的浏览器，如Firefox*/
-webkit-box-shadow : rgba(0,0,0,0.1) 0px 0px 8px; /*兼容Webkit引擎，如Chrome和Safari等*/

 15、box-orient : 定义盒子的布局取向(定义盒子分布的坐标轴，水平或者垂直等)，取值：horizontal | vertical | inline-axis | block-axis

display : box;   /*标准声明：盒子显示*/
display : -moz-box;  /*兼容Mozilla Gecko引擎浏览器*/
display : -webkit-box;  /*兼容Webkit引擎浏览器*/
box-orient : horizontal;  /*标准声明：定义盒子内元素的流向*/
-mozbox-box-orient : horizontal;  /*兼容Mozilla Gecko引擎浏览器*/
-webkit-box-orient : horizontal;  /*兼容Webkit引擎浏览器*/

16、box-direction : 定义盒子的布局顺序，取值normal（正常显示） | reverse（反向显示） | inherit（继承上级元素的显示顺序）。

box-direction : reverse;
-moz-box-direction : reverse;
-webkit-box-direction : reverse;

17、box-ordinal-group属性可以改变盒子内部元素的流动顺序，取值是一个自然数，从1开始，用来设置子元素的位置序号。子元素的分布将根据这个属性值从小到大进行排列。

　　如果没有指定box-ordinal-group属性值的子元素，则其序号默认都为1，并且序号相同的元素将按照它们在文档中加载的顺序进行排列。

box-ordinal-group : 2; /*标注用法*/
-webkit-box-ordinal-group : 2; /*兼容webkit等*/
-moz-box-ordinal-group : 2; /*兼容Mozilla Gecko等*/

18、box-flex：定义盒子的弹性空间。box-flex属性只有在盒子拥有确定的空间大小后才能够正确解析。当盒子中包含多个定义了box-flex属性的子元素时，浏览器将会把这些子元素的box-flex属性值相加，然后根据它们各自的值占总值的比例来分配盒子剩余的空间。

#box{/*定义box元素盒型显示，并设置子元素水平分布*/
        border : solid 1px red;
    margin : auto;
    text-align : left;
    width : 1002px;
        display : box;
        display : -moz-box;
    display : -webkit-box;
    box-orient : horizontal;
    -moz-box-orient : horizontal;
    -webkit-box-orient : horizontal;
}

#box1{/*定义盒子内左侧栏目的宽度为固定显示*/
    width : 201px;
}

#box2{ /*定义盒子内中间栏目的宽度为盒子剩余空间的2/3*/
    box-flex : 4;
    -moz-box-flex : 4;
    -webkit-box-flex : 4;
}

#box3{/*定义盒子内中间栏目的宽度为盒子剩余空间的1/3*/
    box-flex : 2;
    -moz-box-flex : 2;
    -webkit-box-flex : 2;
}

19、box-pack：可以在水平方向上对盒子的富余空间进行管理。取值：start | end | center | justify

　　start : 所有子元素都显示在盒子的左侧，富余的空间显示在盒子的右侧。

　　end: 所有子元素都显示在盒子的右侧，富余的空间显示在盒子的左侧。

　　center : 富余的空间在盒子的两侧平均分配。

　　justify: 富余的空间在子元素之间平均分配。在第一个子元素之前和最后一个子元素之后不分配空间。

#box{/*富余空间在盒子的两侧显示*/
    border : solid 1px red;
    width : 600px;
    height : 400px;
    display : -moz-box;
    display : -webkit-box;
    box-orient : horizontal;
    -moz-box-orient : horizontal;
    -webkit-box-orient : horizontal;
    display : box;
    box-pack : center;
    -moz-box-pack : center;
    -webkit-box-pack : center;
}

20、box-align : 在垂直方向上对盒子的富余空间进行管理，取值start | end | center | baseline | stretch

　　start : 所有子元素沿盒子的上边缘排列，都显示在盒子的上部，富余的空间显示在盒子的底部。

　　end : 所有子元素沿盒子的下边缘排列，都显示在盒子的底部，富余的空间显示在盒子的上部。

　　center : 富余的空间在盒子的上下两侧平均分配，即上面一半，下面一半。

　　baseline : 所有盒子沿着它们的基线排列，富余的空间可前可后显示。

　　stretch : 每个子元素的高度被调整到适合盒子的高度显示。

display : box; /*定义盒子显示*/
display : -moz-box;
display : -webkit-box;
box-orient : horizontal; /*定于盒子的布局取向，盒子的子元素从左到右在一条水平线上显示它的子元素*/
-webkit-box-orient : horizontal;
-moz-box-orient : horizontal;
box-pack : justify;/*水平空间管理，富余的空间在子元素之间平均分配*/
-webkit-box-pack : justify;
-moz-box-pack : justify;
box-align : center; /*垂直空间管理，富余的空间在盒子的上下两侧平均分配，即上面一半，下面一半*/
-webkit-box-align : center;
-moz-box-align : center;

 21、border-image : 定义边框背景图。

　　（1）border-image-source : 边框的背景图像源。比如：border-image-source : url(../images/border2.png);

　　（2）border-image-slice : 定义如何裁剪背景图像。比如：border-image-slice : 30% 35% 40% 30%;如图：

　　离图片上部30%的地方剪裁一下，在右边35%的地方剪裁一下，在离底部40%的地方裁剪一下，在距左边30%的地方也剪裁一下。于是总共对图片进行了“四刀切”，形成了九个分离的区　　域，这就是九宫格。分别对应border-top-image , border-right-image , border-bottom-image , border-left-image, border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image以及中间的内容区域。如图：

（3）border-image-repeat ：定义边框背景图像的重复性。取值 stretch（默认）| repeat | round

上图是九宫格的显示效果的原理核心，亘古不变的是四个边角，不会有拉伸或重复的效果，有变化的就是四边区域和中心区域，这几个区域中的水平和垂直属性也是稳如泰山，屹立不变的，改变的就只是“拉伸”而已，变成重复或是平铺。
stretch ： 
round 和 repeat的区别：round属性值会压缩（或伸展）背景图像切片的大小，使其正好在区域内显示。repeat属性值是从中间开始，不断重复平铺到四周，在平复的过程中保持背景图像切片的大小比例，这样在边缘区域可能会被部分隐藏显示。
如下图设置重复效果：border-image-repeat : round repeat;水平方向上设置round效果，垂直方向上设置repeat效果，很明显，repeat效果会有显示一半的背景图片，并且两个顶端都有一半的图片。

　　如果border-image-slice属性值包含三个参数，则第一个参数表示顶部裁切值。第二个参数表示左右两侧裁切值，第三个参数表示底部裁切值。比如：
　　border-image : url(../images/r5.png) 5 5 0;就等同于border-image : url(../images/r5.png) 5 5 0 5;它表示把边框背景图像分成六块（底部没有裁切），然后分别填充到左上角、顶边、右上角、左边、中间区域和右边。

22、兼容：border-image,-webkit-border-image,-moz-border-image,-o-border-image。
23、（1）border-radius设计圆角。可包含两个参数，第一个值表示圆角的水平半径，第二个值表示圆角的垂直半径。比如：border-radius : 20px/40px;。如果仅包含一个参　　数值，则　　第二个参数值与第一个参数值相同，表示这个角是一个1/4的圆，比如：border-radius : 20px;。兼容性：

border-radius : 20px;
-moz-border-radius : 20px;
-webkit-border-radius : 20px;

　　4个派生的子属性：
　　border-top-right-radius : 定义右上角的圆角
　　border-top-left-radius  : 定义左上角的圆角
　　border-bottom-right-radius : 定义右下角的圆角
　　border-bottom-left-radius : 定义左下角的圆角
（2）内边半径等于外边半径减去对应边的宽度，如果差值为0或者为负值，内边半径为0，则会显示为内直角，而不是内圆角。比如：

div{
    height : 100px;
    border : solid 80px red;
    border-radius : 50px;
    
}

　　上面的代码中，外边半径为50px, 对应边的宽度为80px, 内边半径为-30px, 所以内边半径为0，显示为内直角。如下图所示：

　　（3）使用birder-radius属性定义圆形，设置元素长宽相同，同时设置圆角半径为元素大小的一般即可。

div{
    height : 300px;
    width : 300px;
    background : url(../images/img9.jpg) no-repeat;
    border-radius : 150px;
    -webkit-border-radius : 150px;
    -moz-border-radius : 150px;
}

 24、box-shadow: 块阴影

　　（1）6个参数：阴影类型(投影类型(默认）| inset(内阴影))、X轴位移、Y轴位移(X轴和Y轴位移定义阴影的偏移距离，必要值)、阴影大小(可选值)、阴影扩展(可选值)、阴影颜色(可选　　　　值)。

img{
    height : 300px;
    box-shadow : 2px 2px 10px 10px #06C;
    -webkit-box-shadow : 2px 2px 10px 10px #06C;
    -moz-box-shadow : 2px 2px 10px 10px #06C;
}

div{
    margin : auto;
    height : 300px;
    width : 600px;
    box-shadow : inset 5px 5px 10px #06C; /*定义内阴影、位移5像素、阴影大小为10px、颜色为#06C*/
    -webkit-box-shadow : inset 5px 5px 10px #06C;
    -moz-box-shadow : inset 5px 5px 10px #06C;
}

　　（2）通过多组参数值可以定义多色阴影，如下：

img{
    height : 300px;
    box-shadow : 0px -10px 12px yellow,
                 10px 0px 12px blue,
                 0px 10px 12px green,
                 -10px 0px 12px red;
    -webkit-box-shadow : 0px -10px 12px yellow,
                          10px 0px 12px blue,
                          0px 10px 12px green,
                          -10px 0px 12px red;
    -moz-box-shadow : 0px -10px 12px yellow,
                       10px 0px 12px blue,
                       0px 10px 12px green,
                       -10px 0px 12px red;
    
}

效果：

（3）通过多组参数定义渐变阴影。效果如上图所示：

img{
    height : 300px;
    box-shadow : 0 0 10px red,
                 2px 2px 10px 10px yellow,
                 4px 4px 12px 12px green;
    -webkit-box-shadow : 0 0 10px red,
                          2px 2px 10px 10px yellow,
                          4px 4px 12px 12px green;
    -moz-box-shadow : 0 0 10px red,
                       2px 2px 10px 10px yellow,
                       4px 4px 12px 12px green;
}

　　当给同一个原色设计多个阴影时，需要注意它们的顺序，最先写的阴影将显示在最顶层，如在上例中，红色阴影显示在最顶层。如果顶层的阴影太大，就会遮盖底部的阴影。
25、设计多重背景图像——background属性

body{
    margin : 0px;
    padding : 0px;
    background : url(../images/bg3.png) center no-repeat, /*其中卸载前面的背景图像显示在上面，而写在后面的背景图像将显示在下面*/
                 url(../images/img15.jpg) center 70% no-repeat;
}

26、定义背景图像坐标原点——background-origin属性

　　取值：border | padding | content

　　border : 从边框区域开始显示背景

　　padding : 从补白区域开始显示背景

　　content : 仅在内容区域显示背景

background-origin : content;
-webkit-background-origin : content;
-moz-background-origin : content;

　　background-origin 默认效果类似于background-origin ：padding

27、定义背景裁剪区域——background-clip

　　取值：border | padding | content | no-clip

　　border : 从边框区域向外裁剪背景

　　padding :  从补白区域向外裁剪背景

　　content : 从内容区域向外裁剪背景

　　no-clip : 从边框区域向外裁剪背景

    background : url(../images/img5.jpg) no-repeat;
    padding : 50px;
    background-origin : content;/*设计背景图像的定位坐标点为元素内容区域的左上角*/
    -webkit-background-origin : content;
    -moz-background-origin : content;
    background-clip : content;/*设计以内容区域的边缘裁剪背景图像*/
    -webkit-background-clip : content;
    -moz-background-clip : content;    

28、定义背景图像大小——background-size属性

　　取值：<length> | <percentage> | cover | contain

　　<length> : 由浮点数字和单位表示服组成的长度值，不能为负值。比如：

background-size : 40px; /*定义元素的背景为40px*/
-webkit-background-size : 40px;
-moz-background-size : 40px;

　　<percentage>：取值为0%到100%之间的值，不可为负值。比如：

background-size : 50%; /*定义元素的背景的宽为元素的宽的50%，元素背景的高为元素高的50%*/
-webkit-background-size : 50%;
-moz-background-size : 50%;

　　cover : 保持背景图像本身的宽高比例，将图片缩放到正好完全覆盖所定义背景的区域。比如：

background-size : cover;
-webkit-background-size : cover;
-moz-background-size : cover;

　　上图中第一个元素和第二个元素的宽度是一样的，第一个元素的高度是第二个元素的1/2，为了覆盖所有的背景区域，第一个元素和第二个元素的缩放比例是相同的，也就是缩放后的背景图片大小是相同的。但是第一个元素的高度只有第二个元素的1/2，所以第一个元素只取了缩放后背景图片的中间部分。

　　contain ： 保持图片本身的宽高比例，将图片缩放到宽度或高度正好适应所定义的背景的区域。比如：

background-size : contain;
-webkit-background-size : contain;
-moz-background-size : contain;

　　这个图和上个图除了background-size的取值不一样之外，其他的都一样。将的第一个元素的高度缩放到适合背景区域后，宽度并不适合背景区域，所以第一个元素的两边是空白的。

29、溢出内容处理——overflow-x和overflow-y属性
　　取值：visible | auto | hidden | scroll | no-display | no-content
　　visible : 不剪切内容，也不添加滚动条。该属性值为默认值。
　　auto ： 在需要时剪切内容并添加滚动条。该属性为body和textarea元素的默认值。
　　hidden ： 不显示超出元素尺寸的内容
　　scroll ： 当内容超出元素尺寸时，overflow-x显示为横向滚动条，而overf-y显示为纵向滚动条。
　　no-display : 当内容超出元素尺寸时不显示元素，此时类似添加了display:none声明。该属性值是最新添加的。（我测试的，在chrome中没有效果）
　　no-content : 当内容超出元素尺寸时不显示内容，此时类似添加了visibility:hidden声明。该属性值是最新添加的。（我测试的，在chrome中没有效果）

30、定义盒模型解析模式—— box-sizing
　　取值：content-box | border-box
　　content-box : width/height = content;
　　border-box : width/height = border + padding + content; 
31、自由缩放—— resize属性
　　取值：none | both | horizontal | vertical | inherit
　　none : 浏览器不提供尺寸调整机制，用户不能操纵机制调节元素的尺寸
　　both : 浏览器提供双向尺寸调整机制，允许用户调节元素的宽度和高度
　　horizontal : 浏览器提供单向水平尺寸调整机制，允许用户调节元素的宽度。
　　vertical : 浏览器提供单向垂直尺寸的调整机制，允许用户调节元素的高度。
　　inherit : 默认继承。
　　目前只有Safari和Chrome主流浏览器允许元素缩放，但尚未完全支持，只允许双向调整。但是，我测试的chrome支持both、horizontal和vertical，并且FireFox也支持resize　　属性，并且支持both、horizontal和vertical取值。

width : 200px; /*设计元素最大和最小显示尺寸，用户也只能够在该范围内自由调整*/
height : 120px;
max-width : 800px;
max-height : 600px;
padding : 6px;
background-size : cover;
overflow : auto; /*必须同时定义overflow和resize，否则resize属性声明无效，因为元素默认溢出显示为visible*/
resize : both;

32、border-width : thin、medium、thick(CSS 没有定义 3 个关键字的具体宽度，所以一个用户代理可能把 thick、medium、thin分别设置为等于 5px、3px 和 2px，而另一个用户代　　理则分别设置为 3px、2px 和 1px)

33、定义外轮廓线——outline属性

　　outline-color : 定义轮廓边框颜色。outline-color 接受所有的颜色，还包括关键字invert。invert应该在屏幕上对像素点颜色进行一次反转。

　　outline-style ： 接受值：none、dotted、 dashed、 solid、 double、 groove、 ridge、 inset、outset、outset。

　　outline-width : 定义轮廓边框的宽度。

　　outline-offset ： 定义轮廓边框偏移位置的数值。

34、定义导航序列号—— nav-index属性

　　标签属性tabindex也可以修改页面中元素通过键盘操作获得焦点的顺序。比如：

<input name="name" type="text" class="textbox" id="name" value="" tabindex="1">
<input type="text" name="address" id="address" value="" class="textbox" tabindex="4">
<input type="text" name="city" id="city" value="" class="textbox" tabindex="3">
<input type="text" name="country" id="country" value="" class="textbox" tabindex="2">

　　则通过键盘Tab键获得焦点的顺序为：name->country->city->address

　　属性nav-index也可以实现相同的效果：

input.nav1{
    nav-index : 1;
}

input.nav2{
    nav-index : 2;
}

　　但是，目前好像只有Opera浏览器支持nav-index，(我测试的，chrome和Firefox不支持)

35、为元素添加内容—— content属性

　　content属性属于内容生成和替换模块，该属性能够为指定元素添加内容。

　　取值：normal | string | attr() | url() | counter | none

　　normal : 默认值

　　string ： 插入文本内容。比如：

div:before{
    content : "当前浏览器支持content属性"
}

　　attr() : 插入元素的属性值。比如：

li a:after{
    content : "-<"attr(href)">-";
}

　　url() : 插入一个外部资源。如图像、音频、视频等。比如：

div:after{
    content : url(../images/bg2.jpg);
}

　　counter() : 计数器，用于插入排序标识。

　　counter()不能单独使用，要和counter-increment(添加计数器)和counter-reset(重置计数器)配合使用。比如：为一篇论文添加章节序号。

h1{
    counter-increment : header1;/*每遇到一个h1,header1计数器+1*/
    counter-reset : header2;/*每遇到一个h1, 都要重置计数器header2*/
}

h2{
    counter-increment : header2;    
}

h1:before{
    content : counter(header1);
}

h2:before{
    content : counter(header2);
}

  none ： 无任何内容。

36、Webkit引擎的CSS渐变实现方法

　　（1）直线渐变　

background : -webkit-gradient(linear,left top,left bottom, from(blue), to(red));/*简单的线性渐变背景色，从顶部到底部，从蓝色到红色渐变显示*/
background : -webkit-gradient(linear, right top, right bottom, from(blue), to(red), color-stop(40%,white),color-stop(60%,black));
/*通过设置不同的步长值，从而设计多重渐变效果，从顶部到底部，先是从蓝色到白色渐变，在从白色到黑色渐变，最后是从黑色到红色渐变显示*/

　　（2）径向渐变

background : -webkit-gradient(radial, 200 200,10, 200 200,200, from(red), to(green));/*同心圆（圆心坐标为200，100），内圆半径为10，外圆半径为100，内圆小于外圆半径，从内圆红色到外圆绿色径变，超出外圆半径显示为绿色，内圆显示为红色*/
background : -webkit-gradient(radial, 200 200,10, 200 200,200, from(red), to(green),color-stop(90%,blue));/*同心圆，在内圆到外圆中间90%的位置，即距离外环内添加一个蓝色色标*/
background : -webkit-gradient(radial, 200 100,10, 200 100,90, from(#00c), to(rgba(1,159,98,0)), color-stop(98%,#0cf)); /*通过设置to()函数的颜色值为透明，同时设计相似色，可以设计球形效果*/

37、Gecko引擎的CSS渐变实现方法

　　（1）直线渐变

background : -moz-linear-gradient (red,blue);/*最简单的线性渐变，只需要指定开始颜色和结束颜色，默认从上到下实施线性渐变*/
background : -moz-linear-gradient (top left,red,blue);/*从左上角到右下角的线性渐变*/
background : -moz-linear-gradient (top left,red,rgba(255,0,0,0));/*从左上角到右下角的线性渐变，*/
background : -moz-linear-gradient (red,blue);/*从左到右线性渐变*/
background : -moz-linear-gradient(left center,red,orange,yellow,green,blue,indigo,violet);/*从左到右五彩渐变*/

38、旋转动画——rotate()函数

div:hover {
    /* 定义动画的状态 */
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*IE图形旋转滤镜*/

}

39、缩放动画——scale()函数，参数可以是正数、负数和小数。正数值基于指定的宽度和高度放大元素。负数值先翻转元素(如文字被反转)，然后再缩放元素。使用小于1的小数(如0.5)可以缩小元素。

-webkit-transform : scale(1,2);/*长不变，宽放大成原来的2倍*/
-moz-transform : scale(1,2);
-o-transform : scale(1,2);
-webkit-transform : scale(-2,-2);/*翻转元素之后长和宽分别放大成原来的2倍*/
-moz-transform : scale(-2,-2);
-o-transform : scale(-2,-2);
-webkit-transform : scale(0.5,0.6);/*长缩小成原来的0.5倍，宽缩小成原来的0.6倍*/
-moz-transform : scale(0.5,0.6);
-o-transform : scale(0.5,0.6);

40、移动动画——translate()函数，两个参数，第一个参数表示相对于原位置的X轴偏移距离，第二个参数表示相对于原位置的Y轴偏移距离。

-webkit-transform : translate(10px,10px);/*相对于原位置向右偏移10px, 向下偏移10px*/
-moz-transform : translate(10px,10px);
-o-transform : translate(10px,10px);

41、CSS变形原点——transform-origin属性

　　CSS变形的原点默认为对象的中心点，如果要改变这个中心点，可以使用transform-origin属性进行定义。

-webkit-transform-origin : 0 0;/*以左上角为原点*/
-moz-transform-origin : 0 0;
-o-transform-origin : 0 0;
-webkit-transform-origin : top right; /*以右上角为原点*/
-moz-transform-origin : top right;
-o-transform-origin : top right;
-webkit-transform-origin : 0 100%;/*以左下角为原点*/
-moz-transform-origin : 0 100%;
-o-transform-origin : 0 100%;
-webkit-transform-origin : 100% 100%;/*以右下角为原点*/
-moz-transform-origin : 100% 100%;
-o-transform-origin : 100% 100%;

41、设置过渡的CSS属性——transition-property属性，用来设置转换动画的CSS属性。

　　设置过渡的时间——transition-duration属性，设置转换动画的时间长度。

　　设置过渡延迟时间——transition-delay属性，设置过渡动画的延迟时间。

　　设置过渡效果——transition-timing-function属性。取值：

　　ease : 缓解效果

　　linear : 线性效果

　　ease-in : 渐显效果

　　ease-out : 渐隐效果

　　ease-in-ease-out : 渐显渐隐效果

　　cublic-bezier : 特殊的立方贝塞尔曲线效果

background-color : blue;
-webkit-transition-property : background-color;/*指定动画过渡的CSS属性*/
-moz-transition-property : background-color;
-o-transition-property : background-color;
-webkit-transition-duration : 2s;/*指定动画过渡的时间*/
-moz-transition-duration : 2s;
-o-transition-duration : 2s;
-webkit-transition-delay : 2s; /*指定动画延迟触发*/
-moz-transition-delay : 2s;
-o-transition-delay : 2s;
-webkit-transition-timing-function : ease-in;/*指定动画过渡为渐显效果*/
-moz-transition-timing-function : ease-in;
-o-transition-timing-function : ease-in;

41、定义投影——reflect

-webkit-box-reflect:below; /*最简单的倒影，仅指定方向即可*/
-webkit-box-reflect:below 10px; /*为投影设置距离，向下偏移10px*/
-webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));/*设置渐变倒影，通过渐变遮罩逐渐盖住下面的倒影，营造渐隐效果*/