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. 零宽字符 隐藏字符
