🔎这里是【前端网页】，关注我学习前端不迷路
👍如果对你有帮助，给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️
👀专栏介绍
【前端网页】 目前主要更新HTML，一起学习一起进步。
👀本期介绍
本期主要介绍CSS样式表进阶之图像的灵活使用与拓展知识
文章目录
1.1 引言
1. 图像的灵活使用（拓展）
1.1 引言
网页上我们经常能够看到大量图标图片使用
若每张图片都单独进行一次传输，效率会很低。
好比：我们去超市买水果，若买一个带回家一个，那么效率很低，不如买完一次性打包带回家更方便。
这个网页数据传输道理相同，所以我们的选择是将当前页面所需要的图标图片一次性打包传输，方便使用。
所以，为了提高页面加载效率，这里我们就需要学习 CSS 的精灵图和字体图标。
1.2 精灵图
1.2.1 概念
精灵图，又名雪碧图，是多个小图标的集合图。
我们通过背景图片的设置，就可以使用精灵图。
1.2.2 步骤解析
1 、在精灵图上，找到要使用的图片，测量其宽高
2、以 div 为例，为其设置和图片相同的宽高（加边框仅为了方便演示）
3、通过背景图片引入，不能重复
4、因为现在显示的背景图默认为左上角，我们要通过 background-position 来调节。
5、从图片左上角 测量 距离目标图像左上角的距离（注意，不要覆盖了目标图像）
6 、通过测量得知，目标图像左上角坐标： x=275,y=200
设置时，全部更改为负数即可实现
1.2.3 总结
精灵图通过背景图片、背景位置结合使用，可以提高页面加载的效率，在后期页面美化中使用较为频繁。
1.3 字体图标
1.3.1 引言&概念
精灵图虽然可以提高页面加载效率，但是精灵图同样也存在问题：
1 、 图片放大失真
2 、 图片过大，加载速度过慢，导致网页在加载初期看不到任何图像
3 、 如果想为精灵图添加或者减少图标，要对整体修改，加大了精灵图修改难度
所以，为了弥补精灵图的不足之处，我们还需要学习字体图标，来和精灵图结合使用。
字体图标：引入第三方特殊字体，以特殊字体显示为图片图标。
注：因为在计算机中，字体的本质就是图片，所以又称为图标字体。
优点：
1 、轻量级：字体加载速度极快。
2 、灵活：可以为字体加入颜色、大小、阴影等字体样式
3 、兼容性：支持几乎所有浏览器
4 、效率高：减少了数据传输次数
1.3.2 项目准备
可以使用老师提供的资源，也可以进行如下自由下载
1 、登陆 阿里字体图标库，搜索你需要的字体： http://www.iconfont.cn
2 、例如搜索：“Java ”
3、把需要的图标添加到购物车中
4、选择过各种图标后，点击购物车
5、点击“下载代码”
6、下载完毕，所有代码都在 download.zip 中
1.3.3 环境搭建
1 、解压压缩文件，打开解压的文件夹（文件夹名每次下载略有不同）
2、将需要的字体图标存入 idea 对应位置
课外扩展：
TureType( .ttf ) 格式 .ttf 字体是 Windows 和 Mac 的最常见的字体，支持这种字体的浏览器有
IE9+ 、 Firefox3.5+ 、
Chrome4+ 、 Safari3+ 、 Opera10+ 、 iOS Mobile 、 Safari4.2+;
Web Open Font Format( .woff ) 格式 woff 字体，支持这种字体的浏览器有 IE9+ 、
Firefox3.5+ 、 Chrome6+ 、
Safari3.6+ 、 Opera11.1+;
Embedded Open Type( .eot ) 格式 .eot 字体是 IE 专用字体，支持这种字体的浏览器有 IE4+;
SVG( .svg ) 格式 .svg 字体是基于 SVG 字体渲染的一种格式，支持这种字体的浏览器有
Chrome4+ 、 Safari3.1+ 、
Opera10.0+ 、 iOS Mobille safari3.2+
1.3.4 使用方式
1 、打开 demo_index.html
2、选择 Unicode 或 Symbol 方式中的一种
3、以 Unicode 为例，根据网页提示，找到使用的关键代码
4、idea 中，html 引入 CSS 样式，并复制关键代码
5、查询图标对应的 Unicode 码，修改 span 中的转义字符值。
6 、通过为 iconfont 设置字体大小，改变图标大小（因为字体图标属于字体，但 font-family 不要使
用，无效果）
1.3.5 总结
字体图标可以解决精灵图修改难、图片大的问题，通常和精灵图结合使用，解决网页图标问题。
精灵图：负责页面通用的各种大中型彩色图标图片
字体图标：负责页面快速显示的各种小型图标图片
2. 拓展知识
2.1 文字阴影
字体图标允许我们为文本添加阴影。
格式： text-shadow
：
X
轴偏移
Y
轴偏移 模糊程度 阴影颜色
;
text-shadow: 5px 5px 5px #FF0000;
2.2 元素变成圆形
元素可以在表现形式上通过 CSS 样式调节，变为圆形：
格式： border-radius :百分比;
注意：
1 、 0% 是四边形， 50% 是圆形。 0%~50% 之间是圆角四边形
2 、占用的标准流位置仍为四边形
示例代码：
2.3 截图整个网站
1 、先把滚动条拉倒网页最底部
2 、页面上，鼠标右键，“检查”
3 、 ctrl+shift+P 呼出输入框
4、输入：capture full size screenshot ，敲回车
5、截图后，弹出窗口，提示网页截图保存位置
