目录
1、精灵图
①目的
当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，大大降低页面的加载速度；
因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS 精灵技术(也称cSS Sprites、CSS雪碧)；
②核心原理
将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了；
③使用精灵图核心
精灵技术主要针对于背景图片使用，把多个小背景图片整合到一张大图片中，这个大图片就成为精灵图；
移动背景图片位置，此时可以使background-position；
移动的距离就是这个目标图片的x和y坐标；注意网页中的坐标有所不同（以左上角为顶点，y轴越往下越大，x轴越往右越大，往上往左移动数值是负值）；
使用精灵图的时候需要精确测量，每个小背景图片的大小和位置；
2、字体图标
精灵图有诸多优点，但是缺点也很明显：
- 图片文件还是比较大的
- 图片本身放大和缩小会失真
- 一旦图片制作完毕想要更换非常复杂
此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont；
①使用场景
主要用于显示网页中通用、常用的一些小图标；字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体；
②优点
- 轻量级:一个图标字体要比一系列的图像要小；一旦字体加载了，图标就会马上渲染出来，减少了服务器请求；
- 灵活性:本质其实是文字，可以很随意的改变额色、产生阴影、透明效果、旋转等；
- 兼容性:几乎支持所有的浏览器；
注意:字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化；
3、字体图标的使用和追加
见：https://blog.csdn.net/m0_53454320/article/details/129821213?spm=1001.2014.3001.5502
4、小三角制作
①语法
div {
width: 0;
height: 0;
line-height: 0; /* 防止因为兼容性问题出错，非必要 */
font-size: 0; /* 防止因为兼容性问题出错，非必要 */
border: 50px solid transparent; /* 边框大小决定三角大小 */
border-left-color: pink; /* 边框颜色决定三角颜色 */
}②应用
/* css */
.box1 {
width: 0;
height: 0;
border-top: 10px solid pink;
border-right: 10px solid royalblue;
border-bottom: 10px solid lightgreen;
border-left: 10px solid salmon;
}
.box2 {
width: 0;
height: 0;
margin-top: 20px;
border: 10px solid transparent;
border-top-color: pink;
}
.box3 {
width: 0;
height: 0;
margin-top: 20px;
border: 30px solid transparent;
border-top-color: pink;
}
.box4 {
width: 0;
height: 0;
margin-top: 20px;
border: 30px solid transparent;
border-left-color: pink;
}
<!-- html -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
③案例-京东三角
/* css */
.triangle {
position: absolute;
top: -10px;
right: 45px;
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom-color: skyblue;
}
.square {
position: relative;
width: 100px;
height: 100px;
m
最低0.47元/天 解锁文章
214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
