1 .CSS圆角
    border-radius:10px (圆的半径，值越大弧度越明显)
    当圆角的值等于width值的一半时，会形成一个正圆形，一般写50%
    ：一个值 表示四个角
    两个值 表示左上右下，右上左下
    四个值 表示 左上 右上 右下 左下
    值可以进行X 半径和Y半径的分别设置（XY不同会形成椭圆）： x/y
    多个值 x1 x2 x3 x4/y1 y2 y3 y4
    #box{ border-radius:30px60px/60px90px;}
    2 .CSS3盒子阴影
    box-shadow:
    x y (X轴的偏移量和Y轴的偏移量)
    blur（模糊值）
    spread（模糊范围，四周扩散阴影）
    color （颜色）
    outset （默认，阴影在外，不用写这个值，写了反而效果出不来）inset（阴影在盒子内部）
    #box{ box-shadow: 10px10px10px30pxred; margin:100px;}
    3 .CSS3的过渡
    transition-property 规定设置过渡效果的CSS属性的名称
    ：width height background….
    :all (默认值)如果想所有样式都具备过渡效果，便不用写这个样式。
    transition-duration：规定完成过渡效果需要多少秒或多少毫秒。
    时间越大，运动越慢。
    单位：s（秒） ms（毫秒） 1s=1000ms
    transition-delay： 定义过渡效果何时开始
    ：2s 延迟两秒执行
    ：-2s 提前两秒执行
    （总时间4s，提前执行2s，就是在已经执行2s的位置开始，再运动2s的时间）
    transition-timing-function： 规定速度效果的速度曲线，运动形式。
    ：linear 匀速
    :ease（默认值） 逐渐慢下来
    :ease-in 加速
    :ease-out 减速
    :ease-in-out 先加速后减速
    :cubic-bezier 贝塞尔曲线 http://cubic-bezier.com
    #box{ width:100px; height:100px; background:blue; transition-property:all; transition-duration:4s; transition-delay:-2s; transition-timing-function:linear;}
    #box:hover{ width:300px; height:300px;}
    ulli:nth-of-type(2){ background:blue; width:10px; margin-left: 100px; transition-property:all; transition-duration:4s; transition-timing-function:cubic-bezier(.05,-0.72,.85,1.51);}
    transition：1s 2s
    （第一个时间:transition-duration表示运动的总时间;
    第二个时间transition-delay：：表示延迟或提前的时间 ）
    注：如果过渡添加到了hover中，那么鼠标离开元素的时候就不会有过渡效果。
    4 .CSS3变形
    transform :
    1 .transform : translate(x,y) -> 位移
    translateX(x)
    translateY(y)
    translateZ(z) ( 3D效果中用到了 )
    .box{transform:translate(20px)} 单写一个值，只有x有作用
    注：不影响其他元素，跟相对定位很类似。
    2 .transform : scale(x,y) -> 缩放 , 值是一个比例值 1表示原始大小
    scaleX(x)
    scaleY(y)
    scaleZ(z) ( 3D效果中用到了 )
    注：默认就是以中心点进行缩放的。
    注：当scale中的x,y相同值的时候，可以写一个值。
    .box{transform:scale(2);} x,y同时缩放
    3 .transform : rotate() -> 旋转
    rotateX() ( 3D效果中用到了 )
    rotateY() ( 3D效果中用到了 )
    rotateZ()
    注：rotate() 和 rotateZ() 是相等关系 , deg 角度单位 ( rad 弧度单位 )
    .box{transform:rotate(30deg);}默认Z轴旋转
    4 .transform : skew(x,y) -> 斜切
    skewX(x)
    skewY(y)
    5 .transform-origin: 0 0; //0 0 在元素的左上角。
    #box1:hover#box2{
    / transform:translate(100px,100px); /
    / transform : scaleX(2); /
    / transform : scale(2,.5); /
    / transform : rotate(360deg); /
    / transform : skew(-30deg,-30deg); /
    transform : rotate(360deg) scale(.5) skew(-30deg); }
    可以实现组合的使用 :
    transform : rotate(30deg) scale(2);
    注：顺序 先执行后面的，再执行前面的。
    值之间会影响的，translate()会受到 rotate() scale() skew() 影响。
    注：变形是操作块元素的，对于内联元素不起作用。
    5 .CSS3动画？
    动画是比过渡更适合做一些复杂的动画需要。动画可以一上来就执行，但是过渡不能一上来就执行，需要类似于hover操作才可以。
    animation-name 设置动画的名字 , 名字是自定义的
    animation-duration 动画的持续时间
    animation-delay 动画的延迟时间
    animation-iteration-count 动画的重复次数 , 默认就是1次 , 无限次infinite
    animation-timing-function 动画的运动形式 , 跟transition是一样的
    animation : 复合写法
    animation : boxScale 1s 2s 3 linear;
    @keyframesanimationName : 设置关键帧
    0%(from) : 起始关键帧
    100%(to) : 结束关键帧
    #box{width:200px; height:200px; background:red; }
    #box:hover{animation-name:boxScale;animation-duration:1s;}
    @keyframesboxScale{
    0%{}
    100%{ width:400px; height:400px;}
    }