关于按钮的练习，雪碧图
1.图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载。浏览器加载外部资源时是按需加载的，用则加载，不用不加载。a标签伪元
素link首先加载而hover等其它在指定状态触发时加载。
2.解决图片闪烁问题：
-可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示的图片。
-这样图片会同时加载到网页中，可以有效的避免出现闪烁的问题。（这个技术在网页中应用十分广泛，被称为CSS-Sprite，这种图我们称为雪碧图。）
3.雪碧图使用步骤：
-先确定要使用的图标。
-测量图标的大小。
-根据测量结果创建一个元素。
-将雪碧图设置为元素的背景图片。
-设置一个偏移量以显示正确的图片，注意正负。
4.雪碧图特点：
-一次性将多个图片加载进页面，降低请求的次数，加快访问次数，提示用户的体验。
渐变
1.通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其它颜色过度的效果。
2.渐变的是图片，需要通过background-image来设置。
3.线性渐变，颜色沿着一条直线发生变化 Iinear-gradient()。
4.Iinear-gradient(red, yellow)红色在开头，黄色结尾，中间是过渡区域线性渐变的开头，我们可以指定渐变方向。
-to left
-to right
-to top
-to bottom 默认
-deg表示度数
-turn 表示圈
5.渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况。
6.repeating-linear-gradient() 可以平铺的线性渐变。
7.radial-gradient() 径向渐变(放射性的效果) 。
-默认情况下径向渐变的形状根据元素的形状来计算的。
-正方形 --> 圆形
-长方形 --> 椭圆形
-我们也可以手动指定径向渐变的大小。
-circle
-ellipse
-也可以指定渐变的位置。
-语法：
-radial-gradient(大小 at 位置, 颜色 位置 ,颜色 位置 ,颜色 位置)
-大小：
-circle 圆形
-ellipse 椭圆
-closest-side 近边
-closest-corner 近角
-farthest-side 远边
-farthest-corner 远角
-位置：
-top right left center bottom
学识浅薄，如有错误，恳请斧正，在下不胜感激。
原文：https://www.cnblogs.com/yin-jie/p/13770200.html