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 设置盒子背面是否可见