当前位置：首页 > article >正文

项目页面渲染学习总结

article 2025/1/31 23:49:15

文章目录

vw、vh与%
Vue3路由返回
CSS3背景颜色渐变
文字颜色渐变

vw、vh与%

vw、vh是CSS3新单位，与百分比%一样都是相对长度单位。

区别：

%：相对于父盒子的尺寸来计算，例：width: 100%;将占据父盒子全部宽度，填满其全部剩余空间
vw：相对于视口宽度来计算，1vw相当于视口宽度的1%，100vw等同于视口宽度
vh：相对于视口宽度来计算，1vh相当于视口高度的1%，100vh等同于视口高度

CSS新单位拓展：

vmin：取视口宽度和视口高度中的最小值为基准
vmax：取视口宽度和视口高度中的最大值为基准

Vue3路由返回

important { useRouter } from 'vue-router'
const router = useRouter()

router.back()
router.go(-1)

区别：

通过router.go(-1)后退，原页面表单中的内容会丢失
通过router.back()后退，原页面表单中的内容会保留

CSS3背景颜色渐变

通过线性渐变函数linear-gradient()实现。

线性渐变函数linear-gradient()用于创建一个线性渐变的图像。

语法：background：linear-gradient(direction, color1, color2, …)或background-image：linear-gradient(direction, color1, color2, …)

颜色不能少于两个。

direction：指定渐变的方向（如果不设置方向，默认从上到下）

to left/right/top/bottom - 向左/右/上/下渐变
to left top/left bottom/right top/right bottom - 向左上/左下/右上/右下渐变
xxdeg - 向xx度渐变

注意：该属性需要给盒子设置宽高才能生效。

拓展：在颜色后面加上数值可以设置每个颜色渐变到下一个颜色的长度。

示例1：background-image：linear-gradient(#fff, #000)

效果：在这里插入图片描述

示例2：background-image：linear-gradient(#ccc 100px, #000 150px)从100px开始到150px渐变到黑色。

效果：在这里插入图片描述

示例3：background-image：linear-gradient(#ccc 100px, #000 100px)从100px开始到100px渐变的黑色。

效果：在这里插入图片描述

文字颜色渐变

.linearColor{  
    background-image: linear-gradient(red,#fd8403,yellow); // 为文本元素提供渐变背景
    background-clip: text; // 使用文本内容裁剪背景
    color: transparent; // 将文字颜色改为透明，露出背景色
}