雪碧图/精灵图，渐变色，放射渐变

1、雪碧图/精灵图

学名：图片整合技术

解决图片闪烁问题，提高网站的性能

 实现原理：

将多张图片整合在一起，然后一次性引入到网站中，

减少网络请求，以提高网站的性能

 实现步骤：

1 先确定好你要使用哪个图片或者图标

2 测量图片的大小  例如：290*300

3 根据测量的结果去建一个盒子，对外展示

4 将图片作为背景图引入到盒子中

5 设置图片的位置，以正确的显示图片

background-position：水平方向 垂直方向值；

  水平方向：正值  图片向右，负值  图片向左

  垂直方向：正值  图片向下，负值  图片向上

面试题：请你从提高网站性能上，简述你的建议

（其中一种方式就是雪碧图/精灵图的使用）

              

2、渐变色：从一个颜色向另一个颜色进行过渡，

渐变色不是单纯的背景色，可以把它看成是一个图片，用background-image: url();

可选值

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

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

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

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

   (2)xxdeg 表示角度，度数，会更灵活,正值顺时针，负值逆时针

   (3)turn 表示圈  .5turn，一圈表示360度

  参数2:颜色1

  参数3:颜色2

注意：

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

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

background-image:linear-gradient(red 50px,yellow) ; 颜色后直接跟占比

2：repeating-linear-gradient()

 可以平铺的线性渐变

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

 参数跟linear-gradient是一样的

3、放射渐变：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