CSS3

弹性布局：

父元素： display:box;
子元素：box-flex:1;
盒子的排列：给父元素指定
box-orient:horizontal ； vertical

perspective 透视

transition 过度
animation 动画

检测浏览器是否支持css3和html5，以及支持哪些项的工具：Modernizr 。

圆角：border-radius:num|%  顺序 左上开始 顺时针

盒阴影：box-shadow: 水平偏移量 准直偏移量 模糊度 颜色  和text-shadow  相似

背景图片大小：background-size:num|%

背景图片指定区域：background-region:content-box|padding-box|border-box

background-clip:同上

渐变：

线性：

background: -webkit-linear-gradient( right, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient( to right, red, blue); /* 标准的语法 */　　　　(对角：to bottom right)

径向：

#grad1 {
height: 150px;
200px;
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
}

word-wrap属性允许长的内容可以自动换行。word-wrap: normal|break-word;

css3字体：可以使用任何字体

@font-face
{
font-family: myFirstFont;　　/* 定义名称 */
src: url('Sansation_Light.ttf')  /* 定义地址 */
,url('Sansation_Light.eot'); /* IE9 */
}

div
{
font-family:myFirstFont;  /* 引用 */
}

2D转换：

移动（x，y）

transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */

旋转：顺时针

transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */

放大：scale(2,3) 宽度放大2倍  高度放大3倍。

过渡：

transation:

div {
100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}

div:hover {
200px;
height: 200px;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}

动画：

@keyframes name { from{...}  to{...}}

animation:name 2s;

多列：

-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:4px outset #ff00ff;