携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第六天，点击查看活动详情

精灵图

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

  • 8张小图片分别发送 → 发送8次

  • 合成一张精灵图发送 → 发送1次

• 精灵图的使用
  • 创建一个盒子
  • 通过PxCook量取小图片大小，将小图片的宽高设置给盒子
  • 将精灵图设置为盒子的背景图片
  • 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y

背景图片大小

• 作用：设置背景图片的大小，
• 语法：background-size：宽度 高度；
• 取值：

• background连写拓展
  • 注意点：
    • background-size和background连写同时设置时，需要注意覆盖问题
  • 解决：
    • 要么单独的样式写连写的下面
    • 要么单独的样式写在连写的里面

文字阴影

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

• 拓展：阴影可以叠加设置，每组阴影取值之间以逗号隔开

盒子阴影

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

过渡

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

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