css(圆角，阴影，rgba)及transition动画和变换

1.css3圆角

1，设置某一个角的圆角，比如设置左上角的圆角：border-top-left-radius:30px 60px;

2，同时分别设置四个角：border-redius:30px 60px 120px 150px;

3，设置四个圆角相同：border-redius:50%;

2.css3阴影

box-shadow: h-shadow v-shadow blur spread color inset;

3.rgba(新的颜色值表示法)

1，opacity:0.1;filter:alpha(opacity=10)(兼容IE)；

2，rgba(0,0,0,0.1)

4.css3 transition动画

1，transition-property 设置过度的属性，比如：width height background-color

2，transition-duration 设置过度的时间，比如：1s 500ms

3，transition-timing-function 设置过度的运动方式

    linear 匀速

    ease 开始和结束慢速

    ease-in 开始是慢速

    ease-out 结束时慢速

    ease-in-out 开始和结束时慢速

    cubic-bezier(n,n,n,n)

        比如：cubic-bezier(0.845, -0.375, 0.215, 1.335)

4，transition-delay 设置动画的延迟

5，transition：property duration timing-function delay 同时设置四个属性

5.css3 transform变换

1，translate(x,y)设置盒子位移

2，scale(x,y)设置盒子缩放

3，rotate(deg)设置盒子旋转

4，skew(x-angle,y-angle)设置盒子斜切

5，perspective设置透视距离

6，transform-style flat |preserve-3d 设置盒子是否按3D空间显示

7，translateX,translateY,translateZ 设置三维移动

8，rotateX,rotateY,rotateZ设置三维旋转

9，scaleX,scaleY,scaleZ设置三维缩放

10，tranform-origin设置变形的中心点

11，backface-visibility 设置盒子背面是否可见