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