IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> css补充:css实现小三角,精灵图,字体图标 -> 正文阅读

[JavaScript知识库]css补充:css实现小三角,精灵图,字体图标

一.css实现小三角

1.1 三角形实现

html:

<div class="sanjiao">
</div>

css:

.sanjiao {
    /* 高度和宽度必须指定为零 */
    width: 0;
    height: 0;
    /* 给四边都设置边框和颜色 */
    border-bottom: 30px solid #a1ffb8;
    border-top: 30px solid #d600d6;
    border-left: 30px solid rgb(238, 14, 14);
    border-right: 30px solid rgb(46, 89, 139);
}

效果:
在这里插入图片描述
倒三角:

            width: 0;
            height: 0;
            /* 给四边都设置边框透明 */
            border: 30px solid transparent;
            border-top: 30px solid #d600d6;

效果:
在这里插入图片描述
有边框的三角:

<!--向上的三角形-->
    <div class="border-up">
        <span></span>
    </div>
  .border-up {
            width: 0;
            height: 0;
            border: 30px solid transparent;
            border-bottom: 30px solid #333;
            position: relative;
            margin: 50px auto;
        }

        /* 再写一个三角形,border值不同 */
        .border-up span {
            display: block;
            width: 0;
            height: 0;
            border-left: 28px solid transparent;
            border-right: 28px solid transparent;
            border-bottom: 28px solid #F0981C;
            position: absolute;
            left: -28px;
            top: 1px;
        }

空心三角形:
方式一:

<!--向上的三角形-->
    <div class="border-up">
        <span></span>
    </div>
  .border-up {
            width: 0;
            height: 0;
            border: 30px solid transparent;
            border-bottom: 30px solid #333;
            position: relative;
            margin: 50px auto;
        }

        /* 再写一个三角形,border值不同 */
        .border-up span {
            display: block;
            width: 0;
            height: 0;
            border-left: 28px solid transparent;
            border-right: 28px solid transparent;
            border-bottom: 28px solid #F0981C;
            position: absolute;
            left: -28px;
            top: 1px;
        }

在这里插入图片描述
方式二:

        .signal {
            width: 30px;
            height: 30px;
            border: 1px solid;
            /*设置左边框和小边框为透明*/
            border-left: 1px solid transparent;
            border-bottom: 1px solid transparent;
            /*旋转45度 */
            transform: rotate(45deg);
        }
 <div class="signal">
 </div>

在这里插入图片描述
1.2 小三角实现的原理

盒子每一边的边框都是梯形的,盒子大小为0时,梯形上底(边框内边)也为0,所以两边会合并成三角形。
原理图大致就如下:
在这里插入图片描述
所以当它中间的盒子的宽度,高度都为零,就成了三角形

二.精灵图的使用

css精灵图:就是把多张小图片整合到一张图片中去,再利用CSS的“background-image”,“background-repeat”,“background-position”进行背景定位,background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。
优点:
减少网页http请求,加快页面加载速度,提高页面的性能(适合小图)。
比如页面上使用到很多icon的图,如果页面一张张去请求这些图片的时后那http请求就会很多,这时候把这些图片合并为一张的话,页面就只需要加载一次了,减少了http请求带来的性能消耗。如下图:
在这里插入图片描述
实现:定位好图片的位置,可用ps
在这里插入图片描述

        .box {
         width: 174px;
            height: 60px;
            background-image: url(../img/1.png);
            background-position: -854px -109px;
        }
 <div class="box">
 </div>

在这里插入图片描述

三.字体图标

字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示图标,本质属于字体
灵活性:本质其实是文字,可以随意的改变颜色,产生阴影,透明效果,旋转等
注:字体图标不能代替精灵技术,只是对工作中图标部分技术的提升和优化
字体图标库推荐:

  • icommon
    lcoMoon成立于2011年,推出了第一个自定义剧标字体生成器,它允许用户选择所需要的图标,使它们成一字型。该字库内容种炎繁多,非常全面,唯一的遗憾是国外服务器,打开网速较慢。

使用步骤:https://www.csdn.net/tags/MtTaIg0sODYzNjM4LWJsb2cO0O0O.html

  • 阿里iconfont字库
    这个是阿里妈妈M2UX的一个iconfont字体图标字库,包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。重点是,免费!
    使用步骤:
    选择想要的字体图标。直接下载为图片格式
    在这里插入图片描述
    在这里插入图片描述

参考链接:https://www.jb51.net/css/796161.html

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-04-18 17:32:12  更:2022-04-18 17:35:39 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 2:09:08-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码