小兔鲜项目搭建-精灵图、背景图片大小、盒子阴影、过渡

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:必须，垂直偏移值，允许负值