border-radius/transform/transition 学习笔记

[color=brown] 作为一名初学者，偶然在网上看到牛人用CSS画的灰太狼，才知道原来有border-radius圆角这个属性，于是找了些资料了解了下。[/color]
[size=large][color=olive]1.border-radius[/color][/size]
在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支持这个属性

[size=large][color=olive]2.transform[/color][/size]
在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()

[size=large][color=olive]3.transition[/color][/size]
在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贝塞尔曲线

[color=indigo][size=large]通过对上面属性的认识，自己尝试地画了个小图，觉得很有意思，可惜IE，Opera这种的不支持。以后要多多努力学习才是呢
:D[/size][/color]
[img]http://dl.iteye.com/upload/attachment/574953/2c7ea4a9-3f7c-3953-8fb1-a7c3ce5056c5.jpg[/img]