标签：
.border_radius_test{ border-radius:25px; -moz-border-radius:25px; }
数值越大越圆
.box_shadow_test{ box-shadow:1px 1px 20px #888888; -moz-box-shadow: 1px 1px 20px #888888; }
前两个数值是阴影距离容器的偏移量，第三个数值是阴影的模糊程度，最后一个颜色数值是阴影的颜色
.bg_test{ background-size:50px 50px; -moz-background-size:50px 50px; background-origin:content-box; }
size属性可以调整背景图片大小，缩放图片蛮好用的，origin属性可以自动摆放背景图片位置，有content-box|padding-box|border-box三种选项，就是盒子模型的那三层。
.text_test{ text-shadow:2px 2px 7px #000000; word-wrap:break-word; }
shadow属性的参数设定和容器阴影一样，word-wrap是用来把超出容器范围的文字强制换行。
无论是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 */ }
.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 */ }
.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;} }
标签：
原文地址：http://www.cnblogs.com/zcynine/p/4981745.html
