1.1精灵图：
使用步骤：
1.创建一个盒子，设置盒子的尺寸和小图尺寸相同
2.将精灵图设置为盒子的背景图片
3.修改背景图位置
精灵图的标签一般都用行内标签，如span,b,i；
背景图位置属性：background-position:水平 垂直；
（左侧和上则为负数，右侧和下侧为正数）
2.1 背景图片大小
属性名：background-size:宽度 高度；
取值：
1、数字+px
2、百分比（相对于当前盒子自身的宽高百分比）
3、contain （包含，将背景图片等比例缩放，直到不会超出盒子的最大）
4、cover （覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白，意味着图片的部分内容会看不到）
如果盒子和图片都是等比例的，选择contain 和 cover 都是一样的
盒子里的图片只出现一张：background-repeat:no-repeat;
2.2 background连写拓展：
background:color image repeat position/size;
3.1盒子阴影
属性名：box-shadow
取值：
h-shadow:必须，水平偏移值，允许负值数字+px
v-shadow:必须，垂直偏移值，允许负值数字+px
blur:可选，模糊值数字+px
spread:可选，阴影扩大数字+px
color:可选，阴影颜色
inset:可选，将阴影改为内部阴影inset / 无（默认是外阴影）
4.1过渡（图片中的文字会向上移动）
属性名：transition
过渡的属性：all:所有能过渡的属性都过渡 具体属性如：width:只有width有过渡
过渡的时长：数字+s（秒）
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 200px;height: 200px;background-color: pink;/* 宽度200，悬停的时候宽度600.花费1秒钟；悬停的时候背景颜色由粉色变成红色，花费2秒钟 */transition:width 1s,background-color 2s;}/* 如果过渡的属性多，直接写all，表示所有 *//* 过渡配合hover使用，谁变化谁加过渡属性 */.box:hover{width: 600px;background-color: red;}</style></head><body><div class="box"></div></body></html>
