css样式补充(精灵图, 背景图片大小, 文字和盒子阴影, 过渡)

css样式补充

一. 精灵图

1. 介绍

   场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
   优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
   例如：需要在网页中展示8张小图片
   • 8张小图片分别发送 → 发送8次
   • 合成一张精灵图发送 → 发送1次

2. 使用步骤
   1. 创建一个盒子
   2. 通过PxCook量取小图片大小，将小图片的宽高设置给盒子
   3. 将精灵图设置为盒子的背景图片
   4. 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y (需要加单位px)

二.背景图片大小

1. 作用：设置背景图片的大小，

2. 语法：background-size：宽度 高度；

3. 取值：

4. background连写方法

完整连写: background: color image repeat position/size

注意点：
background-size和background连写同时设置时，需要注意覆盖问题
解决：

1. 要么单独的样式写连写的下面
2. 要么单独的样式写在连写的里面

三. 文字阴影

1. 作用：给文字添加阴影效果，吸引用户注意
2. 属性名：text-shadow
3. 取值：

4. 阴影可以叠加设置，每组阴影取值之间以逗号隔开

四. 盒子阴影

1. 作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
2. 属性名：box-shadow
3. 取值：

五. 过渡

1. 作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
2. 属性名：transition
3. 常见取值：

注意点：

1. 过渡需要：默认状态 和 hover状态样式不同，才能有过渡效果
2. transition属性给需要过渡的元素本身加
3. transition属性设置在不同状态中，效果不同的
   ① 给默认状态设置，鼠标移入移出都有过渡效果
   ② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果