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

字体图标（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)]

<style>
span:after {
     
     
	content: "\e948" ""; 
	font-family: icomoon;
}
/*伪类里面的内容就是字体图标（可以使用编码也可以直接复制内容），一定要声明 font-family 它的值就是字体的名称，与引入时的font-family一致*/
div {
     
     
	font-family: icomoon;
}
</style>
<body>
    <span></span>
    <div></div>
    <!--在html中直接使用字体图标,不过一定要在css中声明font-family-->
</body>

字体图标的追加

在编写网页时发现字体图标不够用，还想加入某些字体图标时可以再次到相应的网站上追加更多的字体图标。具体步骤是在选择页面将文件夹的 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）改为内部阴影。（了解）

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

<style>
	body {
     
     
		border:solid 2px yellow
	}
    div {
     
     
        margin-left: 50px;
        width: 200px;
        height: 200px;
        background-color: red;
        box-shadow: 10px 60px 0px 50px;	
        /* 图一的spread 默认是 0 */
    }
</style>
<body>
	<div></div>
</body>

模糊距离默认是 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 的值不同则必需要设置四个值（无论其他的有没有相同）。

<style> 
div {
     
     
border:2px solid #a1a1a1; 
background:#dddddd;
width:350px;
hight:50px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
<body>
<div>border-radius 属性允许您向元素添加圆角。</div>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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（精灵图）是一种网页图片应用的处理方式。它允许我们将页面涉及到的所有零星图片都包含到一张大图中去。一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收请求和发送图片，造成服务器请求压力过大，这将大大降低页面的加载速。使用精灵图可以有效地减少服务器接收和发送请求的次数，提高页面的加载速度，也有利于对小图标的管理。使用精灵图也会减小图片的内存总占用空间。

精灵图的制作（photoshop）

文件——新建（背景内容透明，根据需要设置大小）——创建，创建后可以通过图像——画布大小来调整画布的大小和定位。
将小图标拖拽至 photoshop 通过图层工具查看图标信息属性（大小）。
在合适的位置添加参考水平垂直参考线并将小图标拖至该位置即可。
最后将整个图片存储为 web 所用格式 png24 即可得到精灵图。

精灵图的使用

在某个地方使用到精灵图则先使用 backgroung-image: url() 引入背景图片（精灵图）。
设置背景图片的 background-repeat: no-repeat;
使用 background-position 属性定位得到相应的小图标。

精灵图的缺点是小图标更改比较麻烦，比如说简单图标的颜色、大小等。这时字体图标的优点就非常突出了。

三角形样式的制作

css 中的三角形样式实质是使用边框样式来制作的，将不必要的边框去掉（将border-width 值设置为0 或者将其 borde-style 值设置为none)，后将不用显示的边框颜色属性值设置为 transparent 即可得到三角形状。

<style>
div {
     
     
	display:inline-block;
	margin:100px 50px;
	border:40px solid;
}
/* 四个边框的基本样式 */

div:nth-child(1) {
     
     
	border-color: red black blue green;
}
/*效果如图一所示*/
div:nth-child(2){
     
     
	border-right: none;
	border-color: red black blue green;	
}
/*去掉右边框，效果如图二所示*/
div:nth-child(3){
     
     
	/*border-color: transparent transparent transparent green;	*/
    boeder-right:none;
    border-color: transparent black transparent green;
}
/*将上下边框改为透明色，其效果如图三所示*/
div:nth-child(4){
     
     
	border-color: transparent black transparent green;
	border-width: 40px 0 70px 30px;	
}
/*改变四条边框的宽度可以任意改变三角形的形状，如图四所示*/
div:nth-child(5){
     
     
	border-color: transparent black transparent green;
	border-width: 0 0 70px 30px;	
}
/*去掉两边框可以得到直角三角形的形状，如图五所示*/
</style>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>

注意去掉边框和将 border-color 属性设置为 transparent 的效果区别。

扬尘 / 2020 / 12 / 21