渐变属性还有2D属性的大概介绍

线性渐变属性的学习

属性:background

    属性值:linear-gradient(参数)

        - 第一个参数表示方向

        - 第二个参数表示颜色1

        - 第三个参数表示颜色2

        - ...最少两个、多个、无数个颜色

    注意- 每个参数之间都需要用逗号隔开

        - 线性渐变是有兼容问题的,需要加浏览器前缀，但是在工作中一般不考虑兼容写法

    第一个参数:方向

        - 从一个边到另一个边  to 空格接结束的方向值  !

        - 从一个角到另一个角  to 空格接结束的角 

        - deg 角度值

    兼容问题/写法

        - 从一个边到另一个边 不能加to 直接写开始的方向值

        - 从一个角到另一个角 不能加to 直接写开始的方向值

        - deg 90减去标准写法的角度值

径向渐变属性学习

       属性:background

    属性值:radial-gradient(参数)

        - 第一个参数表示渐变的起点位置

            - 默认在中心点

            - value(50px 50px)

            - 方向值 top、right、bottom、left

        - 第二个参数表示渐变的形状

            - ellipse 椭圆 circle 圆

        - 第三个参数渐变的大小

            - closest-side：最近边；

            - farthest-side：最远边；

            - closest-corner：最近角；

            - farthest-corner：最远角。

        - 第四个参数表示颜色值1

        - 第四个参数表示颜色值2

        - ...

重复渐变属性：

       background: repeating-radial-gradient属性和属性值一样的，前面多加个repeating

过度属性的学习：

       transition:属性，后面接属性值 常用有一个，或者两个，（ms，s 毫秒或者秒，过度有个贝塞尔曲线的运动方式）

2D的使用：

       属性:transform

    属性值/功能函数

        1：2D位移   transform：translate() 

        2：2D缩放   transform：scale()

        3：2D旋转   transform：rotate()

        4：2D倾斜   transform：skew()

       1：2D位移   transform：translate() 

              位移功能函数: translate(参数)

        - 参数可以有两个 x y用逗号隔开 表示水平垂直方向的位置数值

        - translateX()、translateY()

        - 位移和定位有什么联系? (元素对象、参照物、方向)

            - 位移和相对定位一样 不脱离文档流

        - 应用:浏览器居中

                     常见的面试题：未知元素的大小，设置元素在浏览器居中：

                            position: fixed;

                   top: 50%;

                   left: 50%;

                   transform: translate(-50%,-50%)

       2：2D缩放   transform：scale()

              缩放功能函数: scale(参数)

        - 两个参数 数字 表示是倍数 相同的倍数可以简写成一个

        - scaleX()/scaleY()

        - 小于0 

        - 等于0  隐藏

        - 0~1    缩小多少倍

        - 等于1  默认不会变化,显示

        - 大于1  放大都少倍

              线条的缩放：设置变形原点：

transform-origin:变形原点

                             - 默认缩放值为center center

                             - left、right、top、bottom

       3：2D旋转   transform：rotate()

              属性:transform

           旋转属性值:rotate(角度值)

        - 注意:只有一个参数 可以为正数(顺时针)可以为负数(逆时针) - 默认为Z轴

        - rotateX() 单杠运动 - 参数值是正值的 就沿着顺时针旋转(永远都是从正轴方向观察)

        - rotateY() 钢管舞

4： 2D倾斜 属性值transform：skew()

           倾斜属性值:skew()

        - x y

        - skewX/skewY