20190614笔记（颜色透明度,css,filter,滤镜,计算属性,json和formData转换）

　　今天忙里偷闲，把最近作的笔记作一下整理。

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属性是直接能够设置元素的透明度。