今天忙里偷闲，把最近做的笔记做一下整理。
1.json和formData互相转换
适用场景：对接后台接口。后台接口写的因人而异，不同的人有不同的风格。比如，文件上传，原本就是formData格式，有人偏要写json格式的接口；对象处理，直接用json多方便，有人就偏喜欢用formData。懒得扯皮，自己转拉倒。
代码：
1 // json转formData 2 const formData = new FormData(); 3 Object.keys(params).forEach((key) => { 4 formData.append(key, params[key]); 5 }); 6 7 // formData转json 8 var jsonData = {}; 9 formData.forEach((value, key) => jsonData[key] = value);
2.css计算属性
这个是蛮久前的新属性，自己也一直是使用不太多，因为习惯问题。但是也确实有很多好处比如维护方便，所以遇到比较适合的场景，还是会使用的。
eg：line-height: var(--md-title-height);
3.文字效果——filter滤镜
示例：文字外发光
color: rgb(var(--GG050-rgb));
filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.35));
这是谷歌首页的样式。
滤镜效果filter：
none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()
滤镜可叠加，效果就和PS的滤镜一样
示例css代码：
1 .blur { 2 -webkit-filter: blur(4px); 3 filter: blur(4px); 4 } 5 6 .brightness { 7 -webkit-filter: brightness(0.30); 8 filter: brightness(0.30); 9 } 10 11 .contrast { 12 -webkit-filter: contrast(180%); 13 filter: contrast(180%); 14 } 15 16 .grayscale { 17 -webkit-filter: grayscale(100%); 18 filter: grayscale(100%); 19 } 20 21 .huerotate { 22 -webkit-filter: hue-rotate(180deg); 23 filter: hue-rotate(180deg); 24 } 25 26 .invert { 27 -webkit-filter: invert(100%); 28 filter: invert(100%); 29 } 30 31 .opacity { 32 -webkit-filter: opacity(50%); 33 filter: opacity(50%); 34 } 35 36 .saturate { 37 -webkit-filter: saturate(7); 38 filter: saturate(7); 39 } 40 41 .sepia { 42 -webkit-filter: sepia(100%); 43 filter: sepia(100%); 44 } 45 46 .shadow { 47 -webkit-filter: drop-shadow(8px 8px 10px green); 48 filter: drop-shadow(8px 8px 10px green); 49 }
4.关于颜色透明度的几种写法
我们知道颜色有3种写法，与其对应的可以直接在设置颜色时设置透明度，示例：
1 rgba: rgba(0, 0, 0, 0.35) 第四位表示透明度 2 hex: #00000059 (后两位表示透明度且是16进制，前6位表示颜色) 3 hsla：hsla(0, 0%, 0%, 0.35) 第四位表示透明度
此外，css有opacity属性是直接可以设置元素的透明度。