当前位置: 首页 > news >正文

前端技术小结

这里写目录标题

  • git
  • img 的src动态绑定问题
  • 渐变边框设置


git

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

npm install --legacy-peer-deps   

img 的src动态绑定问题

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

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

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

渐变边框设置

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

       &::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 运算的行为是:如果两个遮罩区域的透明度存在交集区域,则该交集区域会被遮罩去除;而没有交集的部分会被保留下来。也就是说,只有两个遮罩区域的非重叠部分会被展示。

http://www.dtcms.com/a/269759.html

相关文章:

  • Android Jetpack Compose状态管理与状态提升
  • linux安装CUDA
  • VM文件管理与Vi/vim操作
  • multicore和multithreading
  • 多模态交互HMI全解析:语音、手势、眼动追踪的集成方案
  • rocketmq 刷盘机制 与同步机制区别
  • JavaScript之数组方法详解
  • VSYNC 深度解析
  • Apollo源码架构解析---附C++代码设计示例
  • 提炼总结—ROS2机器人开发(完结)
  • 【WEB】Polar靶场 16-20题 详细笔记
  • Python实现二分查找算法详解
  • 经典论文 Science子刊:数据驱动的偏微分方程发现 —— Supplementary Materials
  • 找了两个月,没找到工作
  • 【笔记】开源 AI Agent 项目 V1 版本 [新版] 部署 日志
  • 开源 python 应用 开发(四)python文件和系统综合应用
  • go go go 出发咯 - go web开发入门系列(一) helloworld
  • uniapp使用 renderjs 多平台谷歌地图(Google Map)的适配
  • 力扣-31.下一个排列
  • React Native安卓刘海屏适配终极方案:仅需修改 AndroidManifest.xml!
  • 【openGLES】安卓端EGL的使用
  • Javafx教程(1)——初始Javafx
  • 工业HMI的智能化转型:边缘计算与预测性维护的深度融合
  • 自定义RecyclerView的ItemDecoration,用于处理网格布局间距装饰器(支持边缘间距独立控制)
  • ubuntu vscode 点击变量链接进去后 怎么返回原来的位置
  • LocalStorage和SessionStorage的区别和应用
  • 马尔可夫决策过程
  • python办公自动化----使用pandas和os合并多个订单表
  • 【python】 `parse_time_to_seconds` 在功能及健壮性上有以下主要区别
  • ​扣子Coze飞书多维表插件添加数据记录