CSS强大的特效：
一、边框：
1、 box-shadow:10px 10px 10px 10px red
水平 垂直 模糊 延长 颜色
示例：
<div style="box-shadow:10px 10px 10px 10px red;height: 70px;width: 100px;border: 1px solid red;">
测试数据
</div>
2、border-radius：10px;圆角
3、border-image:url("");
4、border-color:边框颜色
二、背景：
1、background-origin: border-box/padding-box/content-box
定位 ：从border开始显示背景/从padding开始显示背景/从content开始显示背景
2、background-clip: border-box/padding-box/content-box
背景绘制区域：从border开始绘制/从padding开始绘制/从content开始绘制
3、background-size:100px 100px(背景大小值 宽 高)
4、多重背景设置：
background-imagge:url(""),url(""),url("");
backgoudnd-size:100px 100px,200px 200px,300px 300px;
background-position:0 0,100px 100px,200px 200px;
5、背景线性渐变：backgound:_webkit_gradient(linear, 0 0, 0 100px);
线性渐变，开始X Y轴，结束X Y轴
三、文本：
1、文本阴影：text-shadow:1px 1px 1px red;
水平方向偏移，垂直方向偏移，模糊程度，阴影颜色
2、文本溢出：text-overflow:clip（与overflow配合使用）/ellipsis(与overflow配合使用超出部分用。。。表示)
示例：
<p style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width: 90px;height: 50px;">
（一行显示，不换行）；超出部分剪切掉；超出部分用。。。表示
测试数据测试数据测试数据测试数据测试数据测试数据
</p>
<p>测试数据</p>
<p>测试数据</p>
3、连续文本换行：word-wrap:break-word（超过宽度后自动换行）
2D/3D转换
一、2D转换：
第1步：设置对象变换时的过渡
transition-property: all;（全部属性参与过渡）
transition-duration: 2s;（过渡时间）
transition-timing-function: linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier;
(线性过渡)
transition-delay: 2s;（延迟时间）
-webkit-transition: all 2s linear 2s;
第2步：设置类型转换
-webkit-transform-origin: 10px 0;（定义转换时发生的参照点，默认为中心点）
-webkit-transform: translate(500px ,500px);
translate()表移动，rotate(deg)表旋转，scale(1,1)表缩放，skew(deg)表斜切，matrix()表组合操作
示例：
.inner{
transition-property: all;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 2s;
-webkit-transition: all 2s linear 2s;
-moz-transition: all 2s linear 2s;
}
.outer :hover.inner{
-webkit-transform-origin: 10px 0;
-webkit-transform: translate(500px ,500px);
}
二、3D转换：
rotateX()
rotateY()
三、动画设置：
第1步：设置对象变换时的过渡
animation-name: test;（动画的名称）
animation-duration: 2s;（过渡时间）
animation-timing-function: linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier;
(线性过渡)
animation-iteration-count:3(动画播放的次数)
animation-direction:alternate(反向运动)
-webkit-transition: test 2s linear 3 alternate;
第2步：设置类型转换
-webkit-transform-origin: 10px 0;（定义转换时发生的参照点，默认为中心点）
-webkit-transform: translate(500px ,500px);
translate()表移动，rotate()表旋转，scale()表缩放，skew()表斜切，matrix()表组合操作
示例：
.inner{
animation-name: test;（动画的名称）
animation-duration: 2s;
animation-timing-function: linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier;
(线性过渡)
animation-iteration-count:3(动画播放的次数)
animation-direction:alternate(反向运动)
animation-inifite:infinite(循环)
-moz-animation: test 2s linear 3;
}
@-keyframes text(动画名){
from{ ... }
to{ -webkit-transform: translate(500px ,500px); }
}
@-keyframes text(动画名){
0%{ transform:rotate(60deg) }
50%{ transform:rotate(0deg)}
100%{ transform:rotate(0deg)}
}