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屬性是直接能夠設置元素的透明度。