border-radius/transform/transition 学习笔记

    作为一名初学者，偶然在网上看到牛人用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这种的不支持。以后要多多努力学习才是呢