CSS3新特性

边框

border-radius
box-shadow
border-image不支持IE

背景

background-size : width height/百分比/contain/cover
background-origin: padding-box|border-box|content-box;背景定位区域
background-clip: border-box|padding-box|content-box;背景裁剪区域

文本

text-shadow: 5px 5px 5px #FF0000;
word-wrap:break-word；长单词换行

字体

@font-face
		{
		font-family: myFirstFont;
		src: url('Sansation_Light.ttf'),
   		  url('Sansation_Light.eot'); /* IE9+ */
		}
div
{
font-family:myFirstFont;
}

2D转换

Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9 需要前缀 -ms-
火狐加需要前缀-moz-
欧朋需要前缀-o-

transform
translate(x,y)x,y轴平移  translateX()、translateY()
rotate(angle)正时针旋转
scale(x,y)收缩 scaleX() scaleY()
skew(x-angle,y-angle)倾斜角度

3D转换
transform

Opera 不支持 3D 转换（它只支持 2D 转换）

translate3d(x,y,z) 
scale3d（x-angle,y-anlge,z-angle）
rotate3d(x,y,z,angle)

过渡（元素从一个状态到另一个状态的过程）

Safari 需要前缀 -webkit-。

trnasition-property过渡的属性名
trnasition-duration过渡时间
transition-timing-function过渡时间曲线
transition-delay过渡延迟，默认0
transition:all 1s linear 0;简写

动画

定义动画

@keyframes name动画名称{
from{属性} 为动画开始
to{属性} 动画结束
}
@keyframes name动画名称{
0%{}动画开始
25%{} 
50%{}
75%{}
100%{}动画结束
}

引用动画

animation：
animation-name @keyframs规定的动画名称
animation-duration 规定动画完成时间
animation-timing-function动画速度曲线
animation-delay 规定动画开始时间
animation-iteration-count规定动画播放次数，默认1，infinite无限
animation-direction规定动画是否在下一周期逆向播放，默认nomal  alternate逆向播放
简写
animation:name 2s linear 2s infinite alternate