CSS高级技巧（未完待续）

鹤茗_515

已于 2024-08-18 15:55:17 修改

阅读量196

点赞数 3

分类专栏： CSS 文章标签： css 前端

于 2024-08-16 14:48:56 首次发布

本文链接：https://blog.csdn.net/m0_55483876/article/details/141256739

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

下一篇持续更新中… 如有错误欢迎指正！！！

前言

学习目标

在这里插入图片描述

学习内容

在这里插入图片描述

1. 精灵图

1.1 为什么需要精灵图

在这里插入图片描述

1.2 精灵图（spirits）的使用

在这里插入图片描述

2. 字体图标

2.1 字体图标的产生

在这里插入图片描述

2.2 字体图标的优点

在这里插入图片描述

2.3 字体图标的下载

在这里插入图片描述注意侵权问题

2.4 字体图标的引入

在这里插入图片描述

4. 给< span >指定一个字体，必须和font-face里面的一模一样

2.5 字体图标的追加

在这里插入图片描述

3. CSS 三角

在这里插入图片描述

案例

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS 三角制作</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* border: 10px solid pink; */
            border-top: 10px solid pink;
            border-right: 10px solid red;
            border-bottom: 10px solid blue;
            border-left: 10px solid green;
        }
        .box2 {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-left-color: pink;
            margin: 100px auto;
        }
        .jd {
            position: relative;
            width: 120px;
            height: 249px;
            background-color: pink;
        }
        .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: pink;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="jd">
        <span></span>
    </div>
</body>
</html>