css3 新增样式

border-radius 设置圆角

        border-top-left-radius  设置左上角
        border-top-right-radius  设置右上角
        border-bottom-right-radius  设置左下角
        border-bottom-right-radius 设置右下角
        border-top-left-radius ： x y  x代表左上角x轴偏移量 y代表y轴偏移量
        可以设置百分比以及像素

        border-radius:;
        一个值表示 左上 右上 左下 右下 都是
        两个值表示  第一个值左上右下 第二个值 右上左下
        三个值表示  第一个 左上 第二个值右上左下 第三值 右下
        四个之 分别 左上 右上 右下 左下
        border-radius 0 0 0 0/ 0 0 0 0；
        前四个是四个x方向的x轴偏移 后四个是y轴方向的偏移

content-box = 标准盒模型
border-box = 怪异盒模型 padding border 不会影响盒子尺寸 影响内容

transition 过度
transition：all 0 linear 0； 支持类型（width） 执行时间 运动类型 延迟执行时间
transition-property 规定设置过渡效果的 CSS 属性的名称。
过度属性 默认值 all

    transition-duration
                                    过度的步长 默认0s 过度完成需要的时间 单位是s 秒

    transition-timing-function 
                                              linear：匀速
                                              ease ： 慢 快 慢
                                              ease-in ：先慢后快
                                              ease-out：先快后慢
                                              cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之
                                                                                  间的数值
                                      默认值 ease 过度的动画类型 
     transition-delay
                                       默认值 0s     延迟执行过度的时间 单位是 s秒

transform（多个属性可以连写 多个属性用空格）
先设置位移和先设置旋转是两种不同的效果，设置uanzhuan会使X轴也发生改变从而使得位移延旋转
后的X轴或者Y轴方向。
transform：translate(,) rotate() skew() scale() ；
translate
在X轴方向进行变换
translateX: 在X轴上的位移或者变形;
translateY：在Y轴上的位移或者变形;
translate（X，Y）
在X轴和Y轴上的位移或者形变，只有一个值X生效
scale
以元素的中心点为基准缩放
可以设置负数
使用场景：
用于处理十二像素以下 的文本
支持一个数值
scale（X，Y） 缩放
scaleX（）X方向的缩放比例
scaleY（） Y方向的缩放比例
rotate
rotate 旋转 设置元素在2D平面旋转
正数顺时针 负数逆时针
rotateX ：X轴为旋转轴
rotateY ：Y轴为旋转轴
skew
skewX ：绕X轴发生倾斜
skewY ：绕Y轴发生倾斜
常用于平行四边形图案
transform-origin: x y;
设置中心点
默认值 50% 50% /center center
可以是像素 可以使百分比 可以是表示方向的英文单词
可以是负值
animation
初始值
动画名称
animation-name: none；
动画执行时间
animation-duration:0s;
动画过程类型
animation-timing-function: ease；
延迟执行动画的时间
animation-delay:0s;
动画执行顺序
animation-direction: normal；
动画停止
animation-fill-mode: none;
动画播放停止
animation-play-state: running;
动画执行次数
animation-iteration-count: 1; infinite 不停止
animation-timing-function 动画过度的类型
linear：匀速
ease ： 慢 快 慢
ease-in ：先慢后快
ease-out：先快后慢
animation-timing-function: steps(11 , start); 定义帧动画，第一个数值代表执行多少帧
第二个值 有start 和 end 两个属性值 start 没有最后一帧 end 没有第一帧
animation-direction 动画执行顺序
认值 normal：每个动画循环结束，动画重置到起点重新开始
alternate
动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函
数也反向，
比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还
是偶数迭代
reverse
反向运行动画，每周期结束动画由尾到头运行。
alternate-reverse
反向交替， 反向开始
animation-fill-mode:
none 动画执行前后不改变任何样式
forwardfs 目标保持动画最后一帧的样式
backwards 动画采用相应第一帧的样式
both 动画将会执行 forwards 和 backwards 执行的动作。
animation-play-state: running;
running 播放
paused 停止
3D 变形 transform 的translateZ() rotateZ( ) scale（）是的元素可以在Z轴的方向上进行变形
只是变形而不是厚度增加
1. 声明 ：景深层
景深层设置 perspective: 1600px;
2. 声明3D容器
3D容器设置 transform-style: preserve-3d;

特此声明 每一个元素都拥有自己独自的参考系 这样 旋转和移动之后 自己的坐标系也在一起旋转 这点必须要注意