提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
以下介绍前端常用的一些美化样式的小技巧
一、精灵图
实现目的：为了避免服务器请求压力过大，有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术。
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求。
核心知识：
- 精灵技术主要针对背景图片使用，把多个小背景图片整合到一张大图片中，这张大图片即称为精灵图 或者 雪碧图
- 移动背景图片位置可以使用background-position，移动的距离就是这个目标图片的x和y坐标；一般往上和往左是负值；
- 使用精灵图时需要精确测量每张小背景图片的大小和位置；
二、字体图标
- 轻量级：：一个图标字体比一系列的图像要小，一旦字体加载了，图标马上就会渲染出来，减少服务器请求
- 灵活性：本质其实是文字，可以随意更改颜色、阴影、透明效果、旋转等
- 兼容性： 几乎支持所有的浏览器
字体图标使用：
- 字体图标下载：icomoon字库、阿里iconfont字库
- 字体图标引入：下载包中的fonts文件夹放入页面目录下，在css样式中全局声明字体；
- html标签内添加小图标（小方框），标签样式声明字体
- 字体图标追加：把压缩包中的selection.json重新上传，选中自己想要的新图标，重新下载压缩包，并替换原来的文件。
三、CSS三角做法
只需要将盒子的高度和宽度设置为0px，之后设置border宽度以及透明颜色，再将三角形对应的边框设置为相应的颜色，即可得到三角形。
<style>
.box {
width: 0px;
height: 0px;
border: 50px solid transparent;
border-left-color: pink;
margin: 100px auto;
}
</style>
<body>
<div class="box"></div>
</body>
效果图如图所示：
四、用户界面样式
4.1 鼠标样式
为course选择相应的属性，可改变鼠标箭头的形状：
| 属性值 | 描述 |
|---|---|
| default | 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
4.2 轮廓线
取消表单的轮廓线：
input {
outline： none;
}
4.3 文本域
防止拖拽文本域
textarea {
resize: none;
}
注意点：文本域尽量放在一行，否则会出现空格
4.3 vertical-align属性应用
CSS的vertical-align属性的使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
vertical-align：baseline | top| middle| bottom
| 属性 | 描述 |
|---|---|
| baseline | 默认，元素放置在父元素的基线上 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| middle | 把元素放置在父元素的中部 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐 |
4.4 解决图片底侧有空白缝隙
原因：行内块元素默认与文字的基线对齐，不是与底线对齐
主要解决方法：
- 添加vertical-align：top| middle| bottom
- 将图片转化为块级元素 display: block，块级元素没有基线对齐的问题
4.5 单行文本溢出显示省略号
需要满足三个条件：
<style>
div {
width: 150px;
height: 80px;
background-color: pink;
margin: 100px auto;
/* 强制一行内显示 */
white-space: nowrap;
/* 隐藏超出的部分 */
overflow: hidden;
/* 用省略号替代超出的部分 */
text-overflow: ellipsis;
}
</style>
<body>
<div>此处省略一万字啦啦啦啦啦啦啦啦啦啦啦啦啦啦</div>
</body>
效果如下：
4.6 多行文本溢出显示省略号
多行文本溢出显示省略号，有较大的兼容性，适用于webkit浏览器或移动端
<style>
div {
width: 150px;
height: 45px;
background-color: pink;
margin: 100px auto;
/* 隐藏溢出部分 */
overflow: hidden;
/* 添加省略号 */
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
</style>
<body>
<div>此处省略一万字啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</div>
</body>
显示效果图如下：
总结
本文描述常见的美化样式的小技巧~