前端技术小结

这里写目录标题


git

npm下载时经常版本冲突,git指令:

c 复制代码
npm install --legacy-peer-deps   

img 的src动态绑定问题

构建工具的资源处理机制

Webpack/Vite的静态分析:打包工具(如Webpack或Vite)在构建阶段会扫描代码中的静态资源引用(如import或require)。这些引用会被处理成最终部署路径(如添加哈希、压缩文件名等)。

动态绑定的字符串路径:如果路径是通过字符串动态绑定的(如:src="imgPath",且imgPath是一个字符串),打包工具无法在构建阶段确定该路径对应的具体文件,因此不会处理这些资源,导致路径未被替换为正确的输出路径。

c 复制代码
<img :src="require(`@/assets/path/to/your/image.jpg`)" alt="Image" />

渐变边框设置

前端页面很多次遇到了渐变边框的设置。border-color并不能设置渐变色。

解决方法:

css 复制代码
       &::before {
          content: '';
          position: absolute;
          left: -1px;
          top: -1px;
          right: -1px;
          bottom: -1px;
          background: linear-gradient(180deg, #EDF3FF 0%, #CEDEFF 100%);
          border-radius: 30px;
          z-index: -1;
          padding: 1px;
          /* 边框宽度 */
          -webkit-mask:
            linear-gradient(#fff 0 100%) content-box,
            linear-gradient(#fff 0 100%);
          -webkit-mask-composite: xor;
        }

content: '';:这是一个空的内容,用来生成伪元素。必须定义,才能使 ::before 起作用。

position: absolute;:将伪元素定位在父元素的绝对位置上。

left, top, right, bottom:通过设置这些属性来确保伪元素覆盖父元素的边界,并且稍微超出 1px,以创建一个外层的 "边框" 效果。

background: linear-gradient(180deg, #EDF3FF 0%, #CEDEFF 100%);:设置渐变背景,使伪元素有一个从浅蓝到深蓝的垂直渐变效果。

border-radius: 30px;:给伪元素添加圆角,使其具有圆润的边框效果。

z-index: -1;:确保伪元素位于实际元素的后面,不会遮盖实际的内容。

padding: 1px;:为伪元素添加内边距,使得背景渐变稍微缩进,给它一个边框的感觉。

-webkit-mask 和 -webkit-mask-composite:这些是用来创造特殊的遮罩效果,确保背景不会覆盖边框部分。
xor 运算的行为是:如果两个遮罩区域的透明度存在交集区域,则该交集区域会被遮罩去除;而没有交集的部分会被保留下来。也就是说,只有两个遮罩区域的非重叠部分会被展示。

相关推荐
潮湿的心情8 分钟前
中宇联:以“智云融合+AI”赋能全栈云MSP服务,深化阿里云生态合作
人工智能·阿里云·云计算
云布道师8 分钟前
【云故事探索】NO.16:阿里云弹性计算加速精准学 AI 教育普惠落地
人工智能·阿里云·云计算
kevin 111 分钟前
AI文档比对和Word的“比较”功能有什么区别?
人工智能·word
Evand J24 分钟前
【matlab例程】无迹粒子滤波(UPF)的例程,用于三维环境下多雷达目标跟踪,非线性系统
开发语言·matlab·目标跟踪
1892280486134 分钟前
NX947NX955美光固态闪存NX962NX966
大数据·服务器·网络·人工智能·科技
2501_9248787344 分钟前
无人机光伏巡检缺陷检出率↑32%:陌讯多模态融合算法实战解析
开发语言·人工智能·算法·视觉检测·无人机
啃火龙果的兔子1 小时前
解决 Node.js 托管 React 静态资源的跨域问题
前端·react.js·前端框架
沉睡的无敌雄狮1 小时前
无人机光伏巡检漏检率↓78%!陌讯多模态融合算法实战解析
人工智能·算法·计算机视觉·目标跟踪
计算机毕设定制辅导-无忧学长1 小时前
InfluxDB 与 Python 框架结合:Django 应用案例(三)
开发语言·python·django
Shan12051 小时前
人工智能篇之计算机视觉
人工智能