首页 > 其他分享 >前端一些小case

前端一些小case

时间:2023-07-28 18:24:29浏览次数:49  
标签:case 3px 浏览器 前端 元素 生成器 bbb 一些 shadow

1,不规则图形加阴影或光圈 不用 box-shadow: 0 0 10px #000 用 filter: dorp-shadow(0 0 10px #000) 像素点做阴影  该dom对象不能为透明,透明不起作用

2,书写方式 writing-mode: horizontal-tb vertical-rl vertical-lr  , 文字朝向 text-orientation: sideways upright

3,lorem 乱数假文 测试排版的   eg:loremN N 代表数字 生成N个词 lorem*M M代表数字 生成M行 loremN*M 同理  HtmlNode.class#id*N>leremN 推理

4,滤镜 filter: grayscale(1) 灰阶滤镜   hue-rotate(45deg) 阴间滤镜

5.  transition: 3s        transform: translateX(-100%)  不会引起页面重绘

6.  强制渲染  读取元素的尺寸 位置等就会导致浏览器的回流  回流会导致浏览器强制渲染  eg: dom.clientHeight;

  什么时候需要使用呢, 对某一元素的同一css属性连续无缝反复修改,浏览器渲染进程无法及时响应,在中间加入强制渲染

7.  粘性定位  position: sticky;  top: 0;  吸附,相对于父元素,父元素离开指定区域,会带走子元素  

8.  监听元素重叠 

  // 建立观察者

  let ob = new IntersectionObserver((entries) => { console.log(entries)}, { root: null, threshold: .5}) 

  // root : 默认浏览器可视窗口  threshold: 重合度 0-1  entries.isIntersecting:  表示进入还是离开

  // 观察  可观察无限多的元素

  ob.observe(this.observe)  observe: 需要监听的元素 

9.  setInterval  循环执行某些函数 , 当浏览器标签页不是计时器标签页时, setInterval  会将小于1秒的计时,全部按照 1 秒记

10.   如何监听 浏览器 标签页是否为 active ,document.addEventListener('visibilitychange', () => { console.log(document.visibilityState)})

11.   文字 3D 立体 采用  text-shadow: -1px 1px #bbb,-2px 2px #bbb,-3px 3px #bbb,-4px 4px #bbb,-5px 5px #bbb,-12px 12px 3px #666;

12.  yeild  ES6 关键字  使生成器函数执行暂停,并返回 yeild 后的参数  然后调用  生成器 .next() 获取新的值   .next() 可以通过传参,向生成器中注入值,以影响生成器的执行

13.  零宽字符   隐藏字符  

 

标签:case,3px,浏览器,前端,元素,生成器,bbb,一些,shadow
From: https://www.cnblogs.com/ygrzzttzjzzzszz/p/17269644.html

相关文章

  • 2023-07-28 后端接口返回的数据与postman返回的数据不一致 ==》前端不兼容数据库字段
    前言:在传参一致,接口一致的情况下,微信开发者工具调的接口和postman返回的数据的id不一致。具体为:微信开发者工具端调接口拿到的id为22位的数据:1884661033952220199看起来平平无奇对吧,而postman返回的id则为:1884661033952220200是的,接口一样,传参一样,返回的其它数据也一样,唯独这......
  • 阿里 - 前端开发规范
    前端JS项目开发规范编程规约(一)命名规范1.1.1项目命名全部采用小写方式,以中划线分隔正例:mall-management-system反例:mall_management-system/mallManagementSystem1.1.2目录命名全部采用小写方式,以中划线分隔,有复数结构时,要采用复数命名法,缩写不用复数正例:scr......
  • shell case语句
    主要内容介绍linuxshell的case语句一、基本语法case$变量名in"值1") 程序1;;"值2") 程序2;;#其他分支*) 默认匹配程序;;esac#最后用case的倒序esac结束二、快速入门要求:当命令行参数是1时,输出"周一",是2时,就输出"周二",其它情况输出“other"#!/bin/bash#当......
  • 在前端页面中一直出现"Signature has expired."的报错该如何解决
    在排查完后端的问题后,发现还是出现这样的情况很有可能是前端代码传入身份验证的jwt_token时出现了问题jwt和token串之间需要添加一个空格 ......
  • appuim 做自动化测试的时候遇到的一些报错 附解决方法
    1、selenium.common.exceptions.InvalidElementStateException:Message:UnabletoperformW3Cactions.Checkthelogcatoutputforpossibleerrorreportsandmakesureyourinputactionschainisvalid.2、http.client.RemoteDisconnected:Remoteendclosedconn......
  • H5在线CAD前端使用mxdraw和mxcad库预览编辑DWG图纸
    mxdraw前端库预览图纸mxdraw的作用就是预览图纸,也可以绘制一些批注或者其他图形,首先进行安装,如果你没有前端工程化的基础,请先看前端工程化基础知识,mxdraw有详细的文档,建议点击mxdraw查看使用说明,然后我们讲一下转换后的图纸用mxdraw库显示的步骤:1)新建工程这里我们就用vite......
  • 有关java语法的一些细节(与c++比较)
    与c++不同,java不支持方法参数的默认值设置,因此若有此需要,可以使用重载的方式去实现,如:publicclassTest{publicintfunc(inta,Stringb){//TODO}publicintfunc(){returnfunc(0,newString("defult"));}...}java中类型转换都......
  • 前端实现导出Excel表格数据
    前端使用ExportExce导出表格数据步骤一、下载依赖[email protected]@0.14.1--save步骤二、创建一个ExportExce.js文件注意: vue中的话一般是在util文件夹下创建的nuxt的话在plugins下ExportExce.js/*eslint-disable*/import {saveAs}f......
  • N1 刷入 openwrt 作旁路网关的一些杂事
    前言我宿舍原先的网络环境是这样的,一台最新原厂固件的红米ac2100作主路由,一台n1刷入了flippy的openwrt(版本很旧,大约是54+o)作为透明代理(又称旁路网关、旁路由),本来本着能用就不动的原则,虽然一直有小毛病,但只是偶尔折腾一下,没解决又放弃了。问题描述但是这两天,碰到了一个......
  • 这可能是前端处理excel最好的工具了
    大家好,我是程序视点的小二哥!今天小二哥要分享的是一个纯前端实现读取和导出excel文件的工具库:ExcelJSExcelJs简介功能十分简单:读取,操作并写入电子表格数据和样式到XLSX和JSON文件。一个Excel电子表格文件逆向工程项目。在本文中,我们使用xlsx文件。xlsx是Microsoft......