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

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. 【每日一包0005】arr-flatten

    github地址:https://github.com/ABCDdouyae... arr-flatten 将多维数组展开成一维数组 文档地址:https://www.npmjs.com/packag ...

  2. Cannot connect to the Docker daemon. Is 'docker daemon' running on this host?

    if first time to install docker, be noted the docker engine started as root copied from: http://blog ...

  3. 高级软件测试技术-任务进度和总结-Day04

    任务进度11-16 使用工具 Jira 小组成员 华同学.郭同学.穆同学.沈同学.覃同学.刘同学 任务进度 经过了这几天的学习和小组成员的努力,虽然其中还准备了考试,但是大家还是最终按时完成了任务,今 ...

  4. CANopen的相关学习

    CANopen是一种架构在控制局域网路(Controller Area Network, CAN)上的高层通讯协定,包括通讯子协定及设备子协定常在嵌入式系统中使用,也是工业控制常用到的一种现场总线. ...

  5. 打开Excel提示内存不足

    来越南出差第一天,有个越南妹子跟我反应说Excel打不开,提示的是很常见的“内存不足”的错误, 这种问题一般的判断就是打开的程序太多了,关掉一些就可以了,重启都没解决, 在网上找了下,腾讯管家的这篇h ...

  6. 非GUI模式运行Jmeter脚本

    一.应用场景 日常测试过程中发现,在大数量并发时,jmeterGUI界面经常宕机.卡死,在这种情况下我们就需要使用命令行来执行脚本了(非GUI模式). 二.命令行模式优点 1.节约系统资源,无需启动界 ...

  7. SpringMVC +Spring + MyBatis + Mysql + Redis(作为二级缓存) 配置

    转载:http://blog.csdn.net/xiadi934/article/details/50786293 项目环境: 在SpringMVC +Spring + MyBatis + MySQL ...

  8. 6.824 Lab 3: Fault-tolerant Key/Value Service 3B

    Part B: Key/value service with log compaction Do a git pull to get the latest lab software. As thing ...

  9. hibernate 2 多对多映射

    一.实体类 1.Classes.java package cn.gs.wwg.entity; import java.util.Set; public class Classes { private ...

  10. Android Studio编译报错Could not reserve enough space for 2097152KB object heap解决方法

    环境变量中添加