作为一名初学者，偶然在网上看到牛人用CSS画的灰太狼，才知道原来有border-radius圆角这个属性，于是找了些资料了解了下。
1.border-radius
在Chrome和Safari中设计者可以任意指定圆角的位置，格式如下：
-webkit-border-top-left-radius 左上圆角
-webkit-border-top-right-radius 右上圆角
-webkit-border-bottom-left-radius 左下圆角
-webkit-border-bottom-right-radius 右下圆角
-webkit-border-radius 所有圆角
在Firefox中格式则为：
-moz-border-radius-topleft 左上圆角
-moz-border-radius-topright 右上圆角
-moz-border-radius-bottomleft 左下圆角
-moz-border-radius-bottomright 右下圆角
-moz-border-radius 所有圆角
目前只有Chrome,Safari和Firefox支持这个属性
2.transform
在CSS3 中 -webkit-transform和-moz-transform属性包括：
rotate() 旋转多少度 如：rotate(180deg)
skew() 倾斜多少度 如：skew(30deg)
scale() 放大or缩小多少倍 如：scale(3.0) 正数为放大负数为缩小
translate() 位移 如：translate(300px,30px)向右移300px同时向下移30px /translate(-150px,0)向左移150px
以上还皆有X,Y之分，如rotateX(),rotateY()
3.transition
在CSS3中 transition属性就是平滑的改变，动画效果
具体属性如下：
transition-property 指定过渡的性质，比如transition-property:backgrond 就是指backgound参与这个过渡
transition-duration 指定这个过渡的持续时间
transition-delay 延迟过渡时间
transition-timing-function 指定过渡类型，有ease | linear(线性) | ease-in(缓动效果:先慢后快) | ease-out(缓动效果：先快后慢) | ease-in-out(缓动效果：先慢后快再慢) | cubic-bezier贝塞尔曲线
通过对上面属性的认识，自己尝试地画了个小图，觉得很有意思，可惜IE，Opera这种的不支持。以后要多多努力学习才是呢
