最近详细地研究了CSS3的相关内容，并整理了这个文档，方便以后查询使用，分享给大家。
案例代码大家可以下载参考下：https://gitee.com/LIULIULIU8/CSS3
1、边框属性border-radius、box-shadow、border-image
边框圆角
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
边框阴影
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
边框图片
（round 图片铺满整个边框）
-moz-border-image:url(images/border.png) 30 30 round; /* Old Firefox */
-webkit-border-image:url(images/border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(images/border.png) 30 30 round; /* Opera */
border-image:url(images/border.png) 30 30 round;
边框图片
（stretch 图片被拉伸以填充该土区域）
-moz-border-image:url(images/border.png) 30 30 stretch; /* Old Firefox */
-webkit-border-image:url(images/border.png) 30 30 stretch; /* Safari and Chrome */
-o-border-image:url(images/border.png) 30 30 stretch; /* Opera */
border-image:url(images/border.png) 30 30 stretch;
2、背景属性：background-size、background-origin
背景图片大小
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
背景图片的定位区域
(content-box、padding-box或 border-box 区域)
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
多个背景图像
background-image:url(images/bg_flower.gif),url(images/bg_flower_2.gif);
background-size:60px auto;
背景的绘制区域
background-clip:content-box;
3、文本属性text-shadow、word-wrap
文本阴影
(水平阴影、垂直阴影、模糊距离，阴影颜色)
text-shadow: 1px 1px 2px #FF0000;
单词强制分割并换行到下一行
word-wrap:break-word;
文本的换行
（折行）规则。normal|none|unrestricted|suppress;
目前主流浏览器都不支持 text-wrap 属性
text-wrap:none;
4、文本字体@font-face
@font-face
@font-face
{font-family: Sansation_Bold;
src: url(\'font/MStiffHei HKS UltraBold.ttf\')
,url(\'http://www.w3school.com.cn/tiy/example/css3/Sansation_Bold.eot\'); /* IE9+ */
font-weight:bold;}
.Sansation_Bold{ font-family:Sansation_Bold;}
5、2D 转换:transform,对元素进行移动、缩放、转动、拉长或拉伸
移动（translate）
元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
@transform:translate(30px,30px);
-ms-transform:translate(30px,30px); /* IE 9 */
-moz-transform:translate(30px,30px); /* Firefox */
-webkit-transform:translate(30px,30px); /* Safari and Chrome */
-o-transform:translate(30px,30px); /* Opera */
旋转(rotate)
rotate（）元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
缩放(scale)
scale() 方法，元素的尺寸会倍数增加或减少，根据给定宽度（X 轴）和高度（Y 轴）参数
transform:scale(2,4);
-ms-transform:scale(2,4); /* IE 9 */
-moz-transform:scale(2,4); /* Firefox */
-webkit-transform:scale(2,4); /* Safari and Chrome */
-o-transform:scale(2,4); /* Opera */
翻转(skew)
skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-moz-transform:skew(30deg,20deg); /* Firefox */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
-o-transform:skew(30deg,20deg); /* Opera */
组合(matrix)
matrix() 方法把所有 2D 转换方法组合在一起。需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
6、3D 转换:transform来对元素进行格式化
绕X旋转
（rotateX）
rotateX，元素围绕其 X 轴以给定的度数进行旋转
transform:rotateX(40deg);
-webkit-transform:rotateX(40deg); /* Safari and Chrome */
-moz-transform:rotateX(40deg); /* Firefox */
绕Y旋转
（rotateY）
rotateY，元素围绕其 Y 轴以给定的度数进行旋转
transform:rotateY(60deg);
-webkit-transform:rotateY(60deg); /* Safari and Chrome */
-moz-transform:rotateY(60deg); /* Firefox */
7、过渡：transition,是元素从一种样式逐渐改变为另一种的效果
单个样式
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
多个样式
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
过渡属性：
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。none没有属性会获得过渡效果、all 所有属性都将获得过渡效果。、property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transition-delay 规定过渡效果何时开始。默认是 0。
过渡实例
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari 和 Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
过滤实例（简写）
/*简写效果*/
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
8、动画：我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript
/*CSS animations, transforms 以及 transitions 不会自动开启GPU加速：我们可以使用个小技巧“欺骗”浏览器来开启硬件加速。
虽然我们可能不想对元素应用3D变换，可我们一样可以开启3D引擎。例如我们可以用transform: translateZ(0); 来开启硬件加速 。*/
/*@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果*/
@keyframes
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
{background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
{background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
{background:red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
{background:red; left:0px; top:0px;}
}
简单用法
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
下面的表格列出了 @keyframes 规则和所有动画属性：
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
语法：animation: name duration timing-function delay iteration-count direction;
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"
值：linear/ease/ease-in/ease-out/ease-in-out/cubin-bezier(n,n,n,n)
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。infinite表示一直循环
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
normal 默认值。动画应该正常播放。
alternate 动画应该轮流反向播放。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode 规定对象动画时间之外的状态。
组合使用（简写）
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
9、多列——column-count/column-gap/column-rule等（更多属性），您能够创建多个列来对文本进行布局 - 就像报纸那样！
多列
/*column-count 属性规定元素应该被分隔的列数：*/
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
/*column-gap 属性规定列之间的间隔：*/
-moz-column-gap:30px; /* Firefox */
-webkit-column-gap:30px; /* Safari and Chrome */
column-gap:30px;
/*column-rule 属性设置列之间的宽度、样式和颜色规则。*/
-moz-column-rule:4px outset #ff0000; /* Firefox */
-webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */
column-rule:4px outset #ff0000;
10、用户界面-resize、box-sizing、outline-offset等更多属性，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。
resize
/*resize 属性规定是否可由用户调整元素尺寸。*/
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
box-sizing
/*box-sizing : content-box|border-box|inherit;属性允许您以确切的方式定义适应某个区域的具体内容。*/
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
outline-offset
/*outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。*/
margin:20px;
width:150px;
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:15px;