盒子阴影、字体图标、精灵图、圆角边框-白红宇

盒子阴影、字体图标、精灵图、圆角边框

阅读量：144 次

发布时间：2019-02-27

本文共 2758 字，大约阅读时间需要 9 分钟。

字体图标（iconfont)

在 css3 之前，我们必须使用已在用户计算机上安装好的字体来设置字体样式。现在通过 css3，我们可以使用我们喜欢的任意字体。在我们下载好希望使用的字体并将该字体文件存放到 web 服务器上后，它会在需要时被下载到用户的计算机上。存放的字体是在 css3 @font-face 规则中定义的。字体中有一种特殊的字体，它看似小图标实际上是字体，这种字体就是字体图标。下面明确一下字体图标的下载、引入、使用和追加的具体步骤。

字体图标的下载

网站1： https://icomoon.io/

网站2： https://www.iconfont.cn/

网站 1 的下载步骤：进入网站——点击右上角 IcoMoon App——选择或者编辑要下载的字体图标——点击右下角的 Font 并点击下载。

字体图标的引入

找到下载的字体图标压缩文件并解压到 icomoon 文件夹，里面包含的文件如图。将里面的 fonts 文件（里面有四种不同格式的字体文件，这是为了兼容不同的浏览器）放入页面的根目录下。最后在页面的 css 代码中引入字体图标文件，具体的做法可以打开 style.css 文件将里面的 @font-face 部分的代码块复制粘贴至样式文件中，如图所示。

完成上面这些步骤后下载的字体图标就成功被引入到项目中了。

字体图标的使用

打开解压缩后的文件夹里面的 demo.html 文件，里面有每个图标对应的编码和内容（小框框就是相应的图标）。如图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IjgGUodL-1594299044835)(https://s1.ax1x.com/2020/07/09/UnYL6J.png)]



字体图标的追加

在编写网页时发现字体图标不够用，还想加入某些字体图标时可以再次到相应的网站上追加更多的字体图标。具体步骤是在选择页面将文件夹的 json 文件引入（Import Icons）并继续选择字体图标，选完后再次下载压缩文件。用新的压缩文件里面的 fonts 文件替换原来的 fonts 文件即可。

字体图标实际上是字体,所以我们可以方便地设置大小和颜色等样式。这也是为什么有些小图片使用字体图标而不使用图片的原因，而且文字相对图片也可以节省内存。

css3边框

css3 新增了边框阴影和圆角边框等重要的边框样式。还可以使用图片来绘制盒子的边框。主要涉及地属性有：

box-shadow

border-radius

border-image（了解）

盒子阴影（边框阴影）

box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow 向边框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2~4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略的长度的值是 0。各属性值的含义如下：

值
h-shadow	必需。水平阴影的位置，允许负值。
v-shadow	必需。垂直阴影的位置，允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。设置阴影的颜色。
inset	可选。将外部阴影（outset）改为内部阴影。（了解）

示例代码及各个属性值的具体样式表现如下：

模糊距离默认是 0 ，模糊距离越大看起来会越模糊。color 的默认值是 black 。默认是外部阴影（outset），只有改为内部阴影时才需声明，否则不需要再次声明；再次声明是外部阴影会导致阴影无效。内部阴影会出现在盒子的内容区内，但是不会盖住内容，只会覆盖背景。

text-shadow 属性用来给文本添加阴影，属性值与盒子阴影类似，不过没有 spread 和 inset 属性值。

圆角边框

border-radius：top-left | top-right | bottom-right | bottom-left;

按此顺序设置每个 radiu 的值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同（可以使用值复制）。值的形式可以是带长度单位的值，也可以是百分比值。

注意：如果 bottom-left 的值和 top-right 的值不同则必需要设置四个值（无论其他的有没有相同）。


   
    border-radius 属性允许您向元素添加圆角。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rP7kfjQ3-1594299397334)(https://s1.ax1x.com/2020/07/09/UmPtpQ.png)]

还可以使用四个属性分别设置四个圆角

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

精灵图（sprites）

css Sprites（精灵图）是一种网页图片应用的处理方式。它允许我们将页面涉及到的所有零星图片都包含到一张大图中去。一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收请求和发送图片，造成服务器请求压力过大，这将大大降低页面的加载速。使用精灵图可以有效地减少服务器接收和发送请求的次数，提高页面的加载速度，也有利于对小图标的管理。使用精灵图也会减小图片的内存总占用空间。