目录
一.精灵图
1.精灵图的介绍
2.精灵图的使用步骤
二.背景图片大小
三.文字阴影
四.盒子阴影
五.过渡
一.精灵图
1.精灵图的介绍
场景：项目中将多张小图片，合成一张大图片，这张图片称之为精灵图
优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
例如：需要在网页中展示8张小图片
8张小图片分别发送的话需要发送8次，而如果把八张小图片合成一张大图片则只需要发送一次。
当图片量更加大时，精灵图的作用更加能够被体现。
2.精灵图的使用步骤
1.创建一个盒子，设置盒子的尺寸和小图尺寸相同
2.将精灵图设置为盒子的背景图片（这样子才可以通过不同的左边显示需要的部分）
3.修改背景图位置
通过PxCook测量小图片左上角左边，分别取负值设置给盒子的background-position：x y
background-position：x y ：改变背景图片的位置 （x：水平方向的位置，y：垂直方向的位置）
注意：精灵图的标签都用行内标签 比如span，b，i......
(行内标签设置宽高不生效，所以要记得转换标签类型)
二.背景图片大小
作用：设置背景图片的大小
语法：background-size：宽度 高度；
取值：
background连写扩展
完整连写：
注意点：
解决：1.要么单独的样式写连写下面
2.要么单独的样式写在连写的里面
三.文字阴影
text-shadow 属性为文本添加阴影
最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：
h1 {
text-shadow: 2px 2px;
}
还可以设置阴影颜色：
text-shadow: 2px 2px red;
还可以设置阴影的模糊效果
h1 {
text-shadow: 2px 2px 5px red;
} 
扩展：所有css文本属性
四.盒子阴影
作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
属性名：box-shadow
（文字阴影是text-shadow，盒子阴影是box-shadow）
取值：
（按顺序书写）
设置内阴影，直接写inset，但是外阴影是默认的，无需书写outside，否则会报错导致完全不生效
五.过渡
作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
属性名：transition
常见取值：
注意点：
1. 过度需要：默认状态和hover状态样式不同，才能有过渡效果
2 .transition属性给需要过渡的元素本身加
3 .transition属性设置在不同状态中，效果不同的
· 给默认状态设置，鼠标移入移出都有过渡效果
· 给hover状态设置，鼠标移入有过渡效果，移除没有过渡效果
（box的默认属性和hover属性中width和background-color属性不同，在默认属性中设置transition所以鼠标移入时会进行过渡，且时间设置为1s，所以变化会通过1s完成，可以单独设置不同属性的transition，也可以直接把第一个参数设置为all，程序会自动检查不同的样式进行过渡）
