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

20190614笔记(颜色透明度,css,filter,滤镜,计算属性,json和formData转换),第1张

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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/586476.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-12
下一篇 2022-04-12

发表评论

登录后才能评论

评论列表(0条)

保存