css3的使用已经分布在各种网站上，其用途对于前端开发人员来说有很大的帮助，比如之前的圆角矩形，需要使用背景图片来完成，现在只需使用border-radius:5px;便可以做出圆角边框的效果，今天来记录下css3一些常用的属性。
盒子属性：边框圆角：radius,边框阴影：box-shadow
边框：border-radius:top-left top-right bottom-right bottom-left;
这里先赘述一下盒子边框样式设计的先后顺序
border-radius:10px;
border-radius:10px;
border-top-left-radius:10px;
border-top-left-radius:10px;
盒子阴影 box-shadow:h-shadow v-shadow blur color inset/outset
box-shadow:5px 5px 5px red;
默认是外阴影outset
box-shadow:5px 5px 5px red;
box-shadow:5px 5px 5px red inset;
box-shadow:5px 5px 5px red inset;
当然可以设置多个阴影只需在之后面加','。
box-shadow:5px 5px 5px red inset,-5px -5px 5px green;
box-shadow:5px 5px 5px red inset,-5px -5px 5px green;
转换2D/3D：transform：rotate,scale,skew
浏览器的支持：IE10，firfox,opera
为了达到各个浏览器的兼容性.请使用一下方法
-ms-transform:rotate(45deg); /* IE 9 */-moz-transform:rotate(45deg); /* Firefox */-webkit-transform:rotate(45deg); /* Safari and Chrome */-o-transform:rotate(45deg); /* Opera */transform:rotate(45deg);
目前范围仅仅在2d，所有先上2d示例
transform:rotate(Xdeg)定义角度旋转
transform:rotate(0deg)
transform:rotate(45deg)
transform:rotate(45deg)
transform:rotate(Xdeg)定义角度旋转
实用性那就智者见智了。
transform:scale(x)：缩放参数为缩放的倍数
transform:scale(1.5)
注:指在原基础的x,y方向缩放
skew() 方法
transform:skew(0deg,45deg)
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
css3的动画：animate
animation:myanimation 5s linear infinite
animation:myanimation 5s linear infinite;(指定的帧名，执行的时间间隔，效果，执行次数)
<div style="height: 100px; width: 100px; text-align: center; border: 4px solid rgb(0, 0, 255);animation:myanimation 5s linear infinite;">animation:myanimation 5s linear infinite</div><p><style type="text/css">@keyframes myanimation{ 0%{ background-color:red; } 50%{ background-color:green; } 100%{ transform:rotate(720deg); border-radius:50%; background-color:gray; } }</style>动画执行效果：linear:匀速，ease:匀加速，ease-in：减速开始，ease-out:减速结束 ，ease-in-out:减速开始减速结束。
更多效果：url:http://2.liteng.sinaapp.com/HTML5/index.html
下篇将记录css3选择器的使用方法
