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

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

20190614笔记(颜色透明度,css,filter,滤镜,计算属性,json和formData转换)的更多相关文章

  1. Vue学习笔记(二)动态绑定、计算属性和事件监听

    目录 一.为属性绑定变量 1. v-bind的基本使用 2. v-bind动态绑定class(对象语法) 3. v-bind动态绑定class(数组语法) 4. v-bind动态绑定style(对象语 ...

  2. 《从零开始学Swift》学习笔记(Day 50)——扩展计算属性、方法

    原创文章,欢迎转载.转载请注明:关东升的博客 可以在原始类型上扩展计算属性,包括实例计算属性和静态计算属性.添加计算属性的定义,与普通的计算属性的定义是一样的. 实例计算属性示例:在网络编程时,为了减 ...

  3. CSS filter滤镜试玩

    1.模糊(blur). 用法:给相应元素设置高斯模糊,传入的px数值越大越模糊. 2.亮度(brightness). 用法:给元素设置亮度,0%为全黑,100%为元素原始亮度,>100%表示会比 ...

  4. Knockout开发中文API系列3–使用计算属性

    计算属性 如果你已经有了一个监控属性 firstName和lastName,如果你想显示全名该怎么做呢?这个时候你就可以通过计算属性来实现,这个方法依赖于一个或多个监控属性,如果任何依赖对象发生改变他 ...

  5. CSS中filter滤镜学习笔记

    1.CSS静态滤镜样式 (filter)(只有IE4.0以上支持)  CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, . ...

  6. CSS中filter滤镜的学习笔记

    1.CSS静态滤镜样式 (filter)(只有IE4.0以上支持)  CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, . ...

  7. 【转载】CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/ 原文链接:https://www.zhangxinxu.com/wordpress/2018/11/css-f ...

  8. Android 之计算控件颜色透明度

    Android 之计算控件颜色透明度 1.UI会给一个数值,例如:#EFE000,透明度30% 2.用255乘以30%等于76.5,然后四舍五入等于77 3.用计算器将十进制的77转成十六进制的数据为 ...

  9. 兼容性背景颜色半透明CSS代码(不影响内部子元素)

    如何简单兼容性的实现父元素是半透明背景色,而子元素不受影响. 兼容所有浏览器的背景颜色半透明CSS代码: background-color: rgba(, , , .); filter: progid ...

随机推荐

  1. spring cloud:服务网关 Spring Cloud GateWay 入门

    Spring 官方最终还是按捺不住推出了自己的网关组件:Spring Cloud Gateway ,相比之前我们使用的 Zuul(1.x) 它有哪些优势呢?Zuul(1.x) 基于 Servlet,使 ...

  2. mybatis 注解方式插入,主键由uuid函数生成

    @SelectKey(keyProperty = "record.id", resultType = String.class, before = true, statement ...

  3. 关于SQL注入的问题以及解决方法

    1.关于SQL注入 什么是SQL注入: 由于jdbc程序在执行的过程中sql语句在拼装时使用了由页面传入参数,如果用户恶意传入一些sql中的特殊关键字,会导致sql语句意义发生变化,这种攻击方式就叫做 ...

  4. 【Spark机器学习速成宝典】基础篇02RDD常见的操作(Python版)

    目录 引例入门:textFile.collect.filter.first.persist.count 创建RDD的方式:parallelize.textFile 转化操作:map.filter.fl ...

  5. shell脚本之case用法

    你会经常发现自己在尝试计算一个变量的值,在一组可能的值中寻找特定值.在这种情形下, 你不得不写出很长的if-then-else语句,就像下面这样. $ cat test25.sh #!/bin/bas ...

  6. 506C Mr. Kitayuta vs. Bamboos

    分析 代码 #include<bits/stdc++.h> using namespace std; #define int long long ],h[],now[],cnt[]; in ...

  7. 博客侧边栏公告html代码

    前一小段是时钟: 后一段是百度统计,但是显示不出来. 网站概况 - 百度统计 https://tongji.baidu.com/web/25880379/overview/index 趋势分析 - 百 ...

  8. Git-Runoob:Git 教程

    ylbtech-Git-Runoob:Git 教程 1.返回顶部 1. Git 教程 Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git 是 Linus Torva ...

  9. GCC 使用-C语言编译过程

    任何一种高级语言,要想在机器上执行,必须翻译为机器能读懂的机器语言.编译器就相当于翻译官,将高级语言翻译为机器语言. GCC 最初只用了编译 C 语言程序,全称是 GNU C Compiler.后来扩 ...

  10. 为终端配置proxy

    转自:https://my.oschina.net/u/818848/blog/677225?p=1 做开发的同学,应该都会经常接触终端,有些时候我们在终端会做一些网络操作,比如下载gradle包等, ...