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

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