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

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

1.json和formData互相转换

　　适用场景：对接后台接口。后台接口写的因人而异，不同的人有不同的风格。比如，文件上传，原本就是formData格式，有人偏要写json格式的接口；对象处理，直接用json多方便，有人就偏喜欢用formData。懒得扯皮，自己转拉倒。

代码：

 // json转formData
 const formData = new FormData();
 Object.keys(params).forEach((key) => {
 formData.append(key, params[key]);
 });
 
 // formData转json
 var jsonData = {};
 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代码：

 .blur {
     -webkit-filter: blur(4px);
     filter: blur(4px);
 }
 
 .brightness {
     -webkit-filter: brightness(0.30);
     filter: brightness(0.30);
 }
 
 .contrast {
     -webkit-filter: contrast(180%);
     filter: contrast(180%);
 }
 
 .grayscale {
     -webkit-filter: grayscale(100%);
     filter: grayscale(100%);
 }
 
 .huerotate {
     -webkit-filter: hue-rotate(180deg);
     filter: hue-rotate(180deg);
 }
 
 .invert {
     -webkit-filter: invert(100%);
     filter: invert(100%);
 }
 
 .opacity {
     -webkit-filter: opacity(50%);
     filter: opacity(50%);
 }
 
 .saturate {
     -webkit-filter: saturate(7);
     filter: saturate(7);
 }
 
 .sepia {
     -webkit-filter: sepia(100%);
     filter: sepia(100%);
 }
 
 .shadow {
     -webkit-filter: drop-shadow(8px 8px 10px green);
     filter: drop-shadow(8px 8px 10px green);
 }

4.关于颜色透明度的几种写法

　　我们知道颜色有3种写法，与其对应的可以直接在设置颜色时设置透明度，示例：

 rgba: rgba(0, 0, 0, 0.35) 第四位表示透明度
 hex: #00000059 (后两位表示透明度且是16进制，前6位表示颜色)
 hsla：hsla(0, 0%, 0%, 0.35) 第四位表示透明度

此外，css有opacity属性是直接可以设置元素的透明度。