CSS3的新属性

1.圆角矩形

.border_radius_test{
border-radius:25px;
-moz-border-radius:25px;
}

数值越大越圆

2.容器阴影

.box_shadow_test{
box-shadow:1px 1px 20px #888888;
-moz-box-shadow: 1px 1px 20px #888888;
}

前两个数值是阴影距离容器的偏移量，第三个数值是阴影的模糊程度，最后一个颜色数值是阴影的颜色

3.背景图片

.bg_test{
background-size:50px 50px;
-moz-background-size:50px 50px;
background-origin:content-box;
}

size属性可以调整背景图片大小，缩放图片蛮好用的，origin属性可以自动摆放背景图片位置，有content-box|padding-box|border-box三种选项，就是盒子模型的那三层。

4.文字

.text_test{
text-shadow:2px 2px 7px #000000;
word-wrap:break-word;
}

shadow属性的参数设定和容器阴影一样，word-wrap是用来把超出容器范围的文字强制换行。

5.移动/翻转/旋转（2D/3D）

无论是2D还是3D都要用到transform这个属性，而且是-ms-/-moz-/-webkit-/-o-都要有，分别对应IE/老版本的FireFox/Safari&Chrome/Opera...Orz！

水平移动 translate(x,y) 横向移动x，纵向移动y

.translate_test{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-moz-transform:translate(50px,100px); /* Firefox */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
-o-transform:translate(50px,100px); /* Opera */
}

旋转 rotate(n) 顺时针旋转n个deg单位

.rotate_test{
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(x,y) 横向放大/缩小x倍，纵向放大/缩小y倍

.scale_test{
margin:100px;
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(x,y) 绕x轴翻转x个deg单位，绕y轴翻转y个deg单位。

.skew_test{
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 */
}

5.过渡

.transition_test{
width:100px;
height:100px;
background:yellow;
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_test:hover{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}

5.动画

.animation_test{
width:100px;
height:100px;
background:red;
position:relative;
animation:myAnimation 5s;
-moz-animation:myAnimation 5s; /* Firefox */
-webkit-animation:myAnimation 5s; /* Safari and Chrome */
-o-animation:myAnimation 5s; /* Opera */
}
 
@keyframes myAnimation{
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;}
100% {background:red; left:0px; top:0px;}
}
 
/* Firefox */
@-moz-keyframes myAnimation {
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;}
100% {background:red; left:0px; top:0px;}
}
 
/* Safari and Chrome */
@-webkit-keyframes myAnimation {
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;}
100% {background:red; left:0px; top:0px;}
}
 
/* Opera */
@-o-keyframes myAnimation {
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;}
100% {background:red; left:0px; top:0px;}
}