你要的【CSS常用高级技巧】都在这里

本文链接：https://blog.youkuaiyun.com/weixin_62588253/article/details/129833889

本文介绍了CSS的高级技巧，包括精灵图的使用原理和案例，它能提升页面加载速度；字体图标因其轻量级和灵活性成为网页图标的良好选择；以及如何用CSS创建三角形，这是一种构建图形的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

🌟所属专栏：前端只因变凤凰之路
🐔作者简介：rchjr——五带信管菜只因一枚
😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
👉文章简介：本文介绍CSS的常用高级技巧。知识学习内容来自b站的@黑马程序员的视频

🔥精灵图

1.为什么需要精灵图

一个网页中往往有许多图片，服务器频繁接收发送图片就会降低页面加载速度，为了有效减少服务器接收和发送请求的次数，提高页面加载速度，出现了CSS精灵技术。

核心原理：将一些小的背景图片整合到一张大图片中（网速够快图片大没事），这样服务器只用一次请求即可。

2.精灵图的使用

精灵图是针对背景图片使用的；
这个大图片叫sprites 精灵图，也叫雪碧图；
移动背景图片位置，这样就可以只显示大图中的特定小图（利用background-position）；
移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同；
因为一般都是往上往左走，所以数值是负值；
使用精灵图哟啊精确测量每个小背景图片的大小和位置；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 60px;
            height: 60px;
            margin: 100px auto;
            background: url(images/sprites.png) no-repeat -182px 0;

        }

        .box2 {
            width: 27px;
            height: 25px;
            margin: 200px;
            background: url(images/sprites.png) no-repeat -155px -106px;

        }
    </style>
</head>

<body>
    <div class="box1">
    </div>
    <div class="box2"></div>
</body>

</html>

3.精灵图案例

用26个字母的图片拼出自己的名称

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .r {
            width: 200px;
            height: 232px;
            float: left;
            background: url(images/alpha.jpg) no-repeat -230px -777px;
        }

        .c {
            width: 200px;
            height: 232px;
            float: left;
            background: url(images/alpha.jpg) no-repeat -430px 0;
        }

        .h {
            width: 200px;
            height: 232px;
            float: left;
            background: url(images/alpha.jpg) no-repeat -381px -273px;
        }

        .j {
            width: 164px;
            height: 228px;
            float: left;
            background: url(images/alpha.jpg) no-repeat -670px -273px;
        }

        .r {
            width: 200px;
            height: 232px;
            float: left;
            background: url(images/alpha.jpg) no-repeat -230px -777px;
        }
    </style>
</head>

<body>
    <div class="r"></div>
    <div class="c"></div>
    <div class="h"></div>
    <div class="j"></div>
    <div class="r"></div>
</body>

</html>

🔥字体图标

1.字体图标的产生

主要用于网页中通用、常用的一些小图标

精灵图有诸多优点，但是缺点也很明显：图片文件还是比较大，图片本身放大缩小会失真，一旦图片制作好要更换就很复杂。

此时，字体图标iconfont就很适合解决。

字体图标展示的是图标，本质属于字体。

2.字体图标的优点

轻量级：一个字体图标要比图像小很多，加载快
灵活性：本质是文字，可以随便改变颜色、大小等
兼容性：可以放心使用

总结：如果遇到结构和样式简单的就用字体图标；复杂的就用精灵图。

3.字体图标的使用

字体图标的下载（用别人的）

推荐网站：iconmoon,https://fontawesome.com/v3/icon/moon

阿里iconfont字库：iconfont,https://www.iconfont.cn/

字体图标的引入（引入到）

根据不同文件有不同使用方法，有的可以直接下载图片作为图片使用，有的是字体导入，这里就不细说。

字体图标的追加（添加新的）

🔥CSS的三角形

构建一个盒子宽度和高度为0，然后设置所有边框但是颜色为透明，最后在需要设置三角形的方向的反方向重新定义一个边框颜色即可，看案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-left-color: pink;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

看个京东案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-left-color: pink;
            margin: 100px auto;
        }

        .jd {
            position: relative;
            width: 120px;
            height: 249px;
            background-color: black;
        }

        .jd span {
            position: absolute;
            right: 15px;
            top: -10px;
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border: 5px solid transparent;
            border-bottom-color: red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="jd"><span></span></div>
</body>

</html>