雪碧图-渐变色

                      雪碧图

一、图片整合技术（CSS-Sprite）雪碧图/精灵图

  优点：

    1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，

    提高访问效率，提高了用户体验。

    2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验

二、雪碧图使用步骤

      1:先确定要使用的图标

      2:测量图标的大小

      3:根据测量结果创建一个元素

      4:将雪碧图设置为元素的背景

      5：设置一个偏移量以显示正确的图片

      管中窥豹

                       渐变色

渐变：通过渐变可以设置一些复杂的背景颜色，可以从实现一个颜色向其他颜色过渡的效果

  渐变是图片，通过 background-image设置

    可选值

      1：linear-gradient(方位,颜色1,颜色2)  ['ɡreidiənt]

        线性渐变，颜色沿着一条直线发生变化  

            参数1:表示方位，（可选值，不写默认是to bottom）

                    (1)to left，to right, to bottom, to top

                    (2)xxxdeg 表示角度，度数，会更灵活

                    (3)turn 表示圈  .5turn

                  原点0deg，0turn是在下方，正值是顺时针转，负值是逆时针转（了解）

            参数2:颜色1

            参数3:颜色2

            注意：

                可以写多个颜色，默认情况下，颜色是均分占比的

                  也可以手动的指定渐变的分布情况

                background-image:linear-gradient(red 50px,yellow) ;

                    颜色后直接跟占比

2:radial-gradient()   ['reidiəl] ['ɡreidiənt]

          经向渐变（放射性的效果）

            默认情况下，圆心是根据元素的形状来计算的

                        正方形  圆形

                        长方形  椭圆型

   参数1:圆心的形状

                  （1）circle圆形，ellipse椭圆，

                  （2）设置的大小 at 位置==>像素1 像素2 at 0px  0px(了解)

    background-image: radial-gradient(100px 100px at 100px 0px,red,yellow);           

            参数2:颜色1

            参数3:颜色2