摘要：
在开始之前先了解外部字体的引入： 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可以继承父级属 阅读全文
摘要：
css数据类型定义的是css属性中具有代表性的值，在规范的语法格式中，使用关键字外加一对 <和>表示，例如数值类型<number>、色值类型<color>等。 举个例子：background-image这个css属性语法结构如下： background-image : none | <image> 阅读全文