CSS高级——精灵图、字体图标、三角、用户界面（取消表单轮廓 文本域缩放）、文本溢出/环绕

1. 精灵图

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。

因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites. CSS 雪碧）。

1.1 精灵图的使用 

使用精灵图核心总结：

1. 精灵图主要针对于小的背景图片使用。
2. 主要借助于背景位置来实现———background—position.
3. 一般情况下精灵图都是负值。（千万注意网页中的坐标： x 轴右边走是正值，左边走是负值， y 轴下边走是正值，上边走是负值。）

 2. 字体图标

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等

兼容性：几乎支持所有的浏览器，请放心使用 注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

总结：

1. 如果遇到一些结构和样式比较简单的小图标，就用字体图标。
2. 如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

2.1 字体图标的下载

推荐下载网站： icomoon 字库 http://icomoon.io

IcoMoon 成立于 2011 年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使它们成一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

阿里 iconfont 字库 http://www.iconfont.cn 这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用 Al 制作图标上传生成。重点是，免费！

2.2  IcoMoon 字体图使用方法

1. 选择字体并下载
2. 将下载文件中的 fonts 文件夹复制到项目根目录下（也就是正在写的需要用到字体图标的html文件夹中）
3. 字体声明，将 style.css 文件中的开头的字体声明代码赋值到 html 中
4. 给 span 声明字体：

   span {
     font-family: "icomoon";
   }

5. 打开 demo.html，复制页面中的方框图标到 html 代码中即可。

必须先在<style>里面先声明字体：

/* 字体声明 */
        @font-face {
            font-family: 'icomoon';
            src: url