CSS样式补充
精灵图
几个小图片组成一个大图片
减少图片请求次数，减轻负载
使用步骤:
- 创建一个盒子
- 量取小图片大小，将小图片宽高设置给盒子
- 精灵图设置为背景图片
- 量取左上角坐标，取负值给background-position：x，y
背景图片大小
作用：设置背景图片的大小
语法: background-size：宽度，高度
| 取值 | 场景 |
|---|---|
| 数字+px | 简单，方便 |
| 百分比 | 相对于图片本身的宽高百分比 |
| contain | 包含，将背景图片等比例缩放，直到不会超过盒子的最大 |
| cover | 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白 |
文字阴影
作用：给文字添加阴影效果， 增强文字的立体感 属性名称：text-shadow 取值： |参数|含义| |---|-| |x-offset|必须，水平偏移量,允许负值| |y-offset|必须，垂直偏移量,允许负值| |blur|可选，模糊度| |color|可选，阴影颜色，默认黑色|
盒子阴影
作用：给盒子添加阴影效果，增强盒子的立体感 属性名：box-shadow 取值： |参数|含义| |---|-| |x-offset|必须，水平偏移量,允许负值| |y-offset|必须，垂直偏移量,允许负值| |blur|可选，模糊度| |spread|可选，阴影扩散距离| |color|可选，阴影颜色，默认黑色| |inset|可选，是否内阴影|
过渡
作用：让元素的样式慢慢的变化，常配合hover使用，增强网站交互体验 属性名：transition 取值: |参数|取值| |---|-| |过渡的属性|all:所有属性都过渡，具体属性名如：width就是只有宽度过渡| |过渡时间|单位是秒，默认0.3秒|
注意点：
- 过渡需要:默认状态和hover状态样式不同才会有过渡效果
- transition属性需要给过渡的元素本身加
- transition属性设置在不同状态中,效果不同的
- 给默认状态设置，鼠标移入移出都有过渡效果
- 给hover状态设置，鼠标移入有过渡效果，鼠标移出没有过渡效果