前端
文章平均质量分 66
Mr.菓菓
这个作者很懒,什么都没留下…
展开
-
css 中box-shadow使用总结
box-shadow是 CSS 中的一个属性,用于在元素框的外部添加阴影效果。通过调整阴影的偏移量、模糊度、扩展距离和颜色,可以创建出各种独特的视觉效果。box-shadow是一个功能强大的 CSS 属性,通过调整其各个参数,可以轻松创建出各种独特的阴影效果。在网页设计中灵活运用阴影效果,可以使页面更加生动、立体和吸引人。**性能考量:**复杂的阴影效果,尤其是高模糊度,可能影响页面渲染性能,特别是对于动画或在性能较低的设备上。适度使用以保持性能。原创 2024-05-21 22:45:11 · 143 阅读 · 0 评论 -
css中用来设置表格的一些样式属性
等属性来设置表格的样式,并使用。伪类来交替改变行的背景色。在这个示例中,我们使用了。原创 2024-05-16 00:51:22 · 610 阅读 · 0 评论 -
css中用于设置光标颜色的属性
是一个 CSS 属性,它用于定义输入光标(caret)的颜色。这里的“插入光标”(insertion caret)指的是在网页的可编辑器区域内,用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。当值为一个具体的颜色值时,可以使用所有 CSS 支持的颜色表示方式,如 RGB、十六进制、命名颜色等。在这个例子中,可编辑区域内的文字颜色被设置为蓝色,而光标的颜色被设置为黄色。在这个例子中,输入框内的文字颜色被设置为蓝色,而光标的颜色被设置为红色。属性的元素)的插入光标(caret)的颜色。原创 2024-05-13 10:46:20 · 352 阅读 · 0 评论 -
使用css的box-reflect属性制作倒影效果
是一个在 CSS 中创建元素倒影效果的非标准属性。尽管它在过去的一些 WebKit 浏览器中(如旧版的 Safari 和 Chrome)得到了支持,但由于它并未成为 CSS 标准的一部分,因此在现代浏览器中的兼容性较差。以下是对。原创 2024-05-09 11:02:42 · 735 阅读 · 0 评论 -
box-decoration-break 使用介绍
默认情况下,当行内元素跨越多行时,其背景、边框等样式会在每行的开始和结束处被裁剪,这可能导致视觉效果的不连续。然而,使用box-decoration-break属性,可以改变这种默认行为,确保在跨行、跨列或跨页时,元素的样式能够保持连续性和一致性。通过使用该属性,可以确保元素的样式在跨行、跨列或跨页时保持连续性和一致性,从而创建更具吸引力和一致性的视觉效果。另外,在某些浏览器中(如Chrome),可能需要添加浏览器前缀(如。)中,特别是在它们跨越多行、多列或跨页(如打印时)时的渲染方式。原创 2024-05-09 02:33:15 · 407 阅读 · 0 评论 -
border-image-slice详细说明
上一篇文章我们介绍了的用法,其中都比较简单好理解,这边文章我们重点学一下属性,它用于定义边框图像如何被切割并应用到元素的边框上。这个属性允许你指定边框图像的四个边缘(顶部、右侧、底部、左侧)的向内偏移量,从而将边框图像切割成九个区域:四个角、四条边和一个中间部分。如下图所示:我们结合上边的图片来详细学习一下。原创 2024-05-01 03:07:49 · 328 阅读 · 0 评论 -
css 中border-image学习及使用
在CSS中,是一个强大的属性,它允许你使用图片来定义元素的边框,替代传统的纯色、虚线或实线边框。下面我们对属性进行详细学习:: 必需。指定作为边框图片的图像的路径。: 可选。定义图片如何被分割成九个部分来创建边框效果。可以是数值、百分比或填充关键词(fill),默认是100%。: 可选。设置边框图像的宽度,覆盖由产生的宽度。: 可选。设置边框图像超出边框盒的量。: 可选。定义图片如何在边框上重复。可能的值包括 , , , 和 。2. 简写形式常见简写形式为:如果只提供一个数值或百分比,它原创 2024-04-29 00:43:46 · 709 阅读 · 0 评论 -
css中新型的边框设置属性border-inline
是 CSS 逻辑属性的重要组成部分,用于在书写模式无关的情况下设置元素的内联方向边框。掌握并运用这些逻辑属性有助于创建出更灵活、适应性更强的网页布局和样式,特别是在响应式设计和多语言支持场景中。原创 2024-04-24 23:50:15 · 588 阅读 · 0 评论 -
css中新型的边框设置属性border-block
这个属性是简写属性,可以同时设置 border-block-width、border-block-style 和 border-block-color。其中,border-block-start 用于设置元素的开始边界样式,而 border-block-end 用于设置元素的结束边界样式。在 CSS Grid 或 Flexbox 布局中,它尤其有用,因为它可以让你同时控制元素的顶部和底部边框,或者左侧和右侧边框,而无需分别指定。但在实际应用中需关注浏览器兼容性,并合理结合传统边框属性进行样式设定。原创 2024-04-24 17:10:44 · 857 阅读 · 0 评论 -
css中设置元素大小的属性block-size
的逻辑组合,允许你同时设置元素的最小和最大高度。这些属性旨在让布局不再依赖于传统的物理方向(如上下左右),而是基于逻辑方向(如开始、结束、之前、之后)。这有助于在水平和垂直方向都能更好地控制布局,特别是在多语言环境中,其中文本可能从右到左或从下到上流动。因此,在使用此属性时,建议查阅最新的 CSS 规范并测试不同浏览器的兼容性。属性一起使用,以控制元素的盒模型(包括内容、内边距和边框)如何计算其总大小。是 CSS 中的一个属性,它用于设置元素的块级尺寸(即元素的高度)。原创 2024-04-18 20:05:02 · 537 阅读 · 0 评论 -
css中backface-visibility使用
是一个 CSS 属性,用于控制元素的背面是否可见。它主要用于在进行3D转换时控制元素的背面可见性。当一个元素被旋转或进行其他3D变换时,通常浏览器默认会进行背面剪裁(backface culling),使得元素的背面不可见,以提高性能和减少不必要的渲染。然而,有时我们可能希望元素的背面在旋转过程中仍然可见,这时就可以使用。需要注意的是,不同的浏览器可能对这个属性的支持程度不同。的背面则被设置为可见。当这两个元素进行3D旋转时,的背面被设置为不可见,而。的背面将不会显示,而。的背面则会正常显示。原创 2024-04-17 20:47:11 · 290 阅读 · 0 评论 -
css 中backdrop-filter使用
是一个强大的 CSS 属性,通过它可以为页面背景添加各种图形效果。然而,在使用时需要注意其性能影响和浏览器兼容性,并根据实际需求进行适当的应用和优化。通过不断学习和实践,我们可以更好地掌握这一属性,并将其应用于实际项目中,创造出更加美观和引人入胜的界面效果。它允许我们改变元素背后内容的视觉效果,从而创造出新颖、引人注目的界面设计。通过应用不同的滤镜函数,我们可以为页面背景添加模糊、亮度调整、颜色变换等效果。元素背后的内容将被应用模糊效果,同时元素的背景被设置为半透明的白色。原创 2024-04-17 09:39:30 · 710 阅读 · 0 评论 -
css animation 动画详细学习
指定@keyframe动画的名称。/* 应用动画到元素 */原创 2024-04-13 22:55:31 · 499 阅读 · 0 评论 -
css中all 的使用记录
在 CSS 中是一个特殊的属性值,它允许我们重置元素或元素父级的所有属性到其初始值、继承的值或取消设置的值。这一属性非常有用,特别是在需要快速重置多个属性的情况下,它避免了逐一设置每个属性的繁琐过程。属性时,先仔细考虑其影响,并与其他样式管理工具(如 CSS Modules、BEM 等)结合使用,以确保样式的可维护性和一致性。属性提供了便利的重置功能,但在使用时也需要谨慎。过度使用可能会导致样式失去控制,特别是在大型项目中。原创 2024-04-12 23:27:59 · 493 阅读 · 0 评论 -
前端npm常用命令总结
npm(Node Package Manager)是Node.js的包管理器,用于安装和管理Node.js的依赖库。原创 2024-04-10 18:14:22 · 1396 阅读 · 0 评论 -
CSS aspect-ratio属性设置元素宽高比
的宽度会随其父容器变化,而高度则会自动调整以保持1:1的比例。如果图片本身的宽高比不是1:1,超出容器的部分将被裁剪掉。是CSS的一个属性,用于设置元素的期望宽高比。它设置确保元素保持特定的比例,不受其内容或容器大小的影响。)分隔的两个数字,表示宽度与高度的比例。设置元素的宽高比为16:9。原创 2024-04-10 00:26:28 · 380 阅读 · 0 评论 -
accent-color使用
accent-color修改input默认控件的颜色原创 2024-03-20 10:10:42 · 296 阅读 · 0 评论 -
css属性选择器总结
css 属性选择器总结原创 2024-03-18 23:43:11 · 914 阅读 · 0 评论 -
关于谷歌新版调试用具(Chrome Dev Tool ),网络选项(chrome-network)默认开启下拉模式的设置
第三:在输入框中输入“net”会自动检索到 “Redesign of the filter bar in the Network Panel”今天在使用谷歌浏览器进行调试的时候,打开调试工具网络选项发现过滤不同模式的选项卡不见了,转而变成一个下拉式选项,如下图。最后把该选项取消勾选,然后"f12"重新打开调试工具。就会变成选项卡形式的过滤了。第二:切换到实验选项卡。原创 2024-01-31 17:14:37 · 1459 阅读 · 4 评论 -
关于设置html不让浏览器进行缓存的问题
我们现在在做vue,react等项目的时候,由于是单页面的纯前端项目,他们的入口文件往往都是静态的html单一文件。这里需要注意的是,取消缓存可能会增加服务器的负载,因为每次请求都需要从服务器重新获取内容。因此,在决定取消缓存时,请确保权衡利弊,并考虑使用适当的缓存策略来优化性能和用户体验。原创 2024-03-07 13:33:37 · 1454 阅读 · 0 评论 -
css选择器nth-child(n)的学习理解
css3 中的 element:nth-child(n)选择起详细用法原创 2024-03-09 00:46:14 · 482 阅读 · 0 评论 -
css选择器nth-last-child(n)的学习理解
此选择器和nth-child(n)类似都是选择其父元素的第 n 个子元素,唯一的区别在于它是从父元素的子元素末尾开始往前数,一直到第一个子元素。原创 2024-03-14 20:11:27 · 575 阅读 · 0 评论 -
npm run dev命令的执行顺序和原理
当我们在开发vue、react等项目的时候经常会用npm run *命令,那么当我们执行这个命令的时候具体都做了些什么呢?接下来我们就来详细探索一下。原创 2024-03-17 05:54:05 · 1359 阅读 · 0 评论 -
页面引入PDF文件
文件,但是在没有装插件的Google浏览器中却无法浏览,这个时候我们就需要用到google的插件来解析,可以使用下边的方法进行引入,前提是可以访问Google网站。我们在做项目的时候有时候会遇到这样得需求,在页面中插入一个。上边的代码是引入google的插件,然后进行解析。格式的文档,在比较主流的浏览器中,我们可以使用。上边的代码可以在你安装了。解析插件的浏览器中嵌入。原创 2022-10-11 21:27:11 · 870 阅读 · 0 评论 -
js 保留数字固定小数位进行截取
截取指定位数小数原创 2022-07-07 00:42:40 · 1182 阅读 · 0 评论 -
h5中的页面显示隐藏执行事件
h5中类似小程序的onShow和onHide方法原创 2022-06-30 08:15:46 · 1158 阅读 · 0 评论 -
js中的跨域解决方案
说到跨域我们需要先了一些概念同源策略定义:同源策略是一个重要的安全策略,它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。而浏览器也是建立在这样的同源策略基础上的它是浏览器最核心最主要的功能之一。同源定义:两个url地址如果 协议、主机、端口号三个都完全相同就属于同源,就可以正常的进行数据的交互给定一个地址:http://www.localhost:8080/abc/index.html,下列列出与之同源和非同源的例子原创 2022-04-02 03:09:35 · 406 阅读 · 0 评论 -
ES6的模块导入和导出
js在之前的版本中是不支持模块的概念的,一般我们在开发中为了我们的的项目能够多人协作开发,并且每个人定义的变量不会被他人所覆盖,我们会通过一些方式进行控制把我们的代码写到一个自执行的函数中,然后在函数中定义我们的变量名和方法名,然后我们把这些方法和变量存到一个对象中,最后通过一个对象名把它挂载到window对象上,供外界使用。这种情况虽然解决了大部分的命名冲突问题,但是还会有冲突的出现,他也没有真正的实现模块化。后来一些js社区出现了一些模块化的解决方案,require.js、sea.jsES.原创 2022-03-01 23:42:37 · 1509 阅读 · 1 评论 -
vue中组件之间相互通信传值的几种方方法
vue中组件之间相互通讯传值的方式我们在使用vue进行项目开发的时候为了更好地管理项目,我们会把每个功能封装成一个个的组件,在使用的时候直接引入并且调用组件来实现代码的复用。我们在封装组件的时候经常会留有一些预留的接口,供使用的时候调用和传入不同的数据,这个时候我们就涉及到了组件之前的相互传值的问题。我这里总结了在vue中组件之前相互传值的方法:1、子组件和父组件通讯,通过调用父组件给组件自定义属性值来实现<!--parent.vue--><template> &原创 2022-02-27 01:08:25 · 1223 阅读 · 0 评论 -
React前端ui框架收集
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...原创 2022-02-19 22:13:01 · 3071 阅读 · 0 评论 -
js生成的随机数的方法
js生成随数原创 2021-12-23 17:53:59 · 6904 阅读 · 0 评论 -
将一维数组转换成树形结构数组方法总结
我们在开发中经常会处理数组,特别是后端传给我们的扁平化数组,然后将它处理为多维结构的数组将扁平化数组转换成树形结构数组的n中方法原始数据var arr = [ { id: 1, pid: 0, text: '一级1' }, { id: 2, pid: 0, text: '一级2' }, { id: 3, pid: 1, text: '二级1-1' }, { id: 4, pid: 1, text: '二级1-2' } { id: 5, pid: 2, text: '二级2-1'.原创 2021-12-13 08:15:40 · 2224 阅读 · 0 评论 -
防抖函数,和节流函数
防抖函数的定义通过延迟执行的方式,降低某种执行特别频繁事件造成的浏览器性能问题或者是过多请求服务器行为;一个需要频繁触发的函数需要在规定时间内,只让最后一次生效,前面的不生效使用场景防抖函数一般用在onScroll,onResize,onmousemove等操作很频繁的事件第一种:// 当用户输入文字后请求后端接口返回数据/** 基础代码*/// 获取dom元素var inputEle = document.getElementById('inputEle');// 定义一个原创 2021-11-07 16:27:12 · 228 阅读 · 0 评论 -
call, apply, bind的区别和用法
call, apply, bind的用法三个方法都是用来改变方法执行的this的执行的,示例如下:var name = 'qwguo', age = 30;var obj = { name: 'qiweiguo', objAge: this.age, myFun: function(fm, t){ console.log(arguments); console.log(this.name + ',年龄:'+ this.age, '来自:'原创 2021-11-07 00:06:59 · 75 阅读 · 0 评论 -
自己总结的数组去重的方法
在开发中我们经常需要给数组进行去重操作,这里我总结了一些数组去重的方法:首先准备代码中用到的去重原数组var obj = {a: 10, b: 20};var arr = [1,1, 0, 0,'true','true',true,true,15,15,false,false, 'false','false', undefined, undefined, 'undefined', 'undefined', null,null, NaN, NaN,'NaN', 'a', 'a',{},{},obj,ob原创 2021-11-06 23:13:18 · 114 阅读 · 0 评论 -
将类数组转换成数组的方法
类数组的概念:类数组是指:和“数组”类似,并且在写法上跟数组一样,可以按照数组的方式访问每个类数组的元素,但是不能直接使用数组方法。比如arguments,函数的第一个参数是argument[0],写法上跟数组一样,但是不是数组,他的原型是Object,获取dom元素的集合合适类数组。操作类数组的方式// 获取类数组中的元素function abc(){ for(var x = 0; x < arguments.length; x++){ console.log(arguments[x]原创 2021-10-23 18:27:44 · 1317 阅读 · 0 评论 -
开源icon、SVG、字体图标库收集
1、icomoonIcoMoon 正在努力为完美主义者构建和提供最佳的肖像和图标管理工具。IcoMoon 的图标库仅具有最好的图标。我们所有的图标都设计在精确的像素网格上。IcoMoon 应用程序允许您以许多不同的格式构建和使用自己的图标包,包括 SVG、聚合物、PDF、XAML、CSH、带连字的图标字体或良好的旧 PNG/CSS 精灵。它最早应用在bootstrap库当中IcoMoon 于 2011 年 11 月首次建成并发布。自发布以来,它改变了当今网络中使用图标的方式。IcoMoon 引入了第一原创 2021-06-03 20:54:12 · 2687 阅读 · 0 评论 -
shape-outside
shape-outside 使用shape-outside 属性用来定义浮动元素的浮动区域。这个浮动区域决定了行内内容(浮动元素)所包裹的形状。也就是说,当元素浮动的时候,元素周围的文字内容以何种方式环绕。语法:shape-outside: keyword | [keyword] Function | url | gradient | global具体值说明:关键字值nonenone: 不对浮动区域进行任何设置,使用浏览器的默认行为,文字以浮动元素的margin进行围绕;margin-原创 2021-01-31 21:23:44 · 1672 阅读 · 0 评论 -
更改手机端a链接单击时候高亮背景问题
我们在开发手机端网站的时候经常会用到a连接跳转,然后有时候我们a连接包裹的是一张图片或者是其他非文字的元素。当我们单击连接区域的时候会出现蓝色半透明的背景颜色,想去掉这个也非常简单,通过设置下边属性可以实现:-webkit-tap-highlight-color: transparent | rgba(0, 0, 0, 0);这是上边的属性值为透明或者是其他颜色的透明度为0能达到效果。-webkit-tap-highlight-color介绍-webkit-tap-highlight-color是原创 2020-08-29 16:15:21 · 217 阅读 · 0 评论 -
css中的背景介绍
背景设置是css中常用的属性,它能用来给元素设置背景颜色和背景图片,css早起版本中背景设置的项目不是很多,只能简单的设置背景颜色,背景图片,背景图片的位置,平铺方式等;css3为背景属性增加了很多功能,包括:设置多张背景图片,背景的大小,渐变背景等更过功能,接下来我们将详细介绍背景的多有属性值和用法background-colorbackground-color用来设置元素的背景颜色语法:/*css*//*关键字 透明*/background-color: transparent;/.原创 2020-08-01 16:31:50 · 631 阅读 · 0 评论