学习总结：浏览器兼容性、渐变、过渡、css3中的2d变形

css3属性:预览版，还没有一个正式的最终版，多以有很多的兼容性问题，浏览器不识别

浏览器为了使这些浏览器兼容，每一个浏览器厂商都会提供一个专属于自己的浏览器语法规则，浏览器兼容前缀

主流浏览器：
谷歌 火狐 苹果 欧朋 IE

浏览器前缀
-weklit- 谷歌
-moz- 火狐
-ms- IE
-o- 欧朋

box-shadow:水平偏移量 垂直偏移量 模糊度 阴影大小 颜色

css3 渐变：由浏览器生成

线性渐变
    background：-webkit-linear-gradient（方向，颜色1，颜色2，颜色3）；

    1：单一方向渐变
        left 从左边开始
        right 从右边开始
        top 从上部开始
        bottom 从底部开始
        注意：需要添加兼容前缀

        to left 到左边（结束位置）
        to right 到右边
        to top 到上边
        to bottom 到底部
        注意：不需要添加兼容前缀

    2：对角渐变
        left top 从左上开始
        left bottom 从左下开始
        right top 从右上开始
        right bottom 从右上开始
        注意：需要添加兼容前缀

        to left top 左上结束
        to left bottom 左下结束
        to right top 右上结束
        to right bottom 右上结束
         注意：不需要添加兼容前缀

    3: 角度渐变
            10deg 10度

    4：默认情况下颜色趋于均分
            可以指定颜色分布的百分比，让颜色按照百分比进行渐变
            blue 10% 到10%都是蓝色
            red 10px 到10px都是红色

径向渐变（一定要加浏览器前缀）
    从一个点到四周的渐变
        background：-webkit-radial-gradient（渐变位置，形状，大小，颜色1，颜色2，颜色3）
        
        渐变位置：默认从中心到四周的渐变
            left    从左边到四周的渐变
            right
            top
            bottom

            left top 从左上角到四周的渐变
            left bottom
            ......
        形状：
            默认椭圆 ellipse
            正圆  circle
            注意：元素是正方形，则都是正圆
        
        大小：
            size渐变的大小，即渐变到哪里停止，它有四个值。
            closest-side：最近边
            farthest-side：最远边
            closest-corner：最近角
            farthest-corner 最远角

渐变重复：
    
    线性渐变：repeating--linear-gradient

    径向渐变：repeating--radial-gradient

    补充：渐变是加给background-image的

过渡 transition
让元素的动画发生平滑的效果，而不是直接生硬的效果
1：什么属性在做动画 transition-property：属性1，属性2，属性3，…属性n；
2：时间需要多久 transition-duration：2s；时间是秒为单位
3：等待时间（可选）transitin-delay：3s；
4：动画类型（不写）transition-timing-function：；
5：综合写法 transition：过渡属性 过渡时间 延迟时间 运动类型；
（过渡transition的这四个子属性只有是必需值且不能为0。其中，和都是时间。当两个时间同时出现时，第一个是，第二个是；当只有一个时间时，它是，而为默认值0）

opacity 透明度 取值范围 0-1；能够取小数

css3 2d变形
位移 transform：translate（）；
缩放 transform：scale（）；
旋转 transform：rotate（）；
倾斜 transform：skew（）；
位移
transform：translate（x y）

缩放
    transform：scale(1)（水平垂直都缩放）
    transform：scale(0.5,1.5)（水平缩小位0.5，垂直扩大为1.5）
    transform：scaleX()（水平缩放）
  transform：scaleY()（垂直缩放）
    取值范围：0-0.99999 缩小
            1          与原来一样大小
            大于1      放大

 旋转
    translate：rotate(30deg)
    角度可以为正负
    

变形基点
    transform-origin
    center 中间
    left  左边
    right 右边
    bottom  下边
    top     上边

    left top 左上
    left bottom
    ...