03 2023 档案
摘要：在了解原型和原型链之前首先得明确它俩是什么东西： 原型：prototype 又称显示原型 1、原型是一个普通对象 2、只有构造函数才具备该属性 3、公有属性可操作 隐式原型：__proto__ 1、只有对象(普通对象、函数对象）具备 2、私有的对象属性，不可操作 有了上面的概念之后，我们再来探讨一下
阅读全文
摘要：在了解小程序登录之前，请大家先了解小程序的全局实例和全局组件，以方便理解本文的后续内容，已经了解的可以直接开始。 全局实例和全局组件（ 👈 点击直达） 微信小程序的登录流程 微信小程序的登录 首先需要写一个微信小程序的登录弹窗，登录弹窗的作用就是发起登录，让用户点击授权后登录小程序，该弹窗是一个全
阅读全文
摘要：效果如下： pinia小菠萝分为头部和身体，头部三片叶子，菠萝为身体 头部 先绘制头部的盒子，将三片叶子至于头部盒子中 先绘制中间的叶子，利用border-radius实现叶子的效果，可以借助工具来快速实现圆角的预想效果 https://9elements.github.io/fancy-borde
阅读全文
摘要：先写下一段文字 添加重复的线性渐变，该渐变倾斜45deg（倾斜角度依需求设置） 上面的为黑色、透明色的渐变，实际上渐变的颜色需要跟文字的背景颜色相同，如果文字的背景色是白色那么渐变的颜色就是白色、透明色，白色用来融入背景，透明色用来显示被遮住的文字，如下: 写下相同的文字，覆盖条纹阴影，调整文字的位
阅读全文
摘要：在开始之前先了解外部字体的引入： vite中字体的引入方法（.otf字体等）如下： 1、在src下的assets文件夹下创建font文件夹，将下载好的字体包放到该文件夹下 2、在font文件夹下创建font.css文件，如果你用的是scss，那么就是font.scss。less同理。 3、在font
阅读全文
摘要：css的渐变分为三种： 线性渐变：linear-gradient() 圆形渐变：radial-gradient() 锥形渐变：conic-gradient() 下面就这三种渐变分别讨论一下： linear-gradient()线性渐变 linear-gradient() 函数用于创建一个表示两种或多
阅读全文
摘要：box-shadow 在实现案例之前先了解css的阴影属性box-shadow，该属性可以为盒子设置阴影，它有五个参数，X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。 box-shadow文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/bo
阅读全文
摘要：@ CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。 常用的transform 属性有下面几个 | 属性 | 说明 | | | | | translate(0, 0) | 位移 | | rotate(0deg) | 旋转 | |scale(1) | 缩放 | | skew(0d
阅读全文
摘要：传统的黏性定位是使用js通过计算高度来实现的，当元素滚动到一定位置时吸附在当前位置。下面我们通过css来实现黏性定位功能。 黏性定位 黏性定位目前主流的浏览器已经全部支持，顾名思义，黏性定位具有吸附的效果，其实它是position的新增属性，语法：position: sticky;开启了黏性定位后，
阅读全文
摘要：效果预览 在实现转场效果之前，需要先了解css的clip-path属性，该属性就是实现转场的核心属性，clip-path属性可以使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。也就是说裁切的大小不会超过实际的大小，超出的隐藏，实际大小内的显示。 clip-path的属性有下面几个：
阅读全文
摘要：项目中经常会碰到页面自适应的问题，例如：商城的列表展示、分类列表展示等页面，如下： 该页面会随着页面的放大缩小而随之发生变化，解决方法：display: flex;配合子元素的动态宽度来实现，子元素的宽度 = (总宽 - 自身的margin) / 每行的数量即可。 .box{ border: 1px
阅读全文
摘要：首先需要明确一点，以往浏览器对css的支持是不同的，不同浏览器的样式可能会存在差异，对待这种差异问题，需要写几套不同的css来兼容（边框、圆角、颜色等），这样是非常麻烦的，浏览器css显示差异化属于浏览器自身的问题，跟我们的css是没有关系的，好的浏览器就有好的显示，糟糕的浏览器就只有普通显示，我们
阅读全文
摘要：css的全局关键字有下面几个： inherit : 继承父级属性 initial：将元素初始化成css的初始值 unset：继承和初始化元素 revert：还原到浏览器内置样式 all：代指所有css属性 下面分别说说这几个关键字的实际作用 inherit 继承父级属性 inherit可以继承父级属
阅读全文
