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;}

}

巴特西