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属性是直接可以设置元素的透明度。
20190614笔记(颜色透明度,css,filter,滤镜,计算属性,json和formData转换)的更多相关文章
- Vue学习笔记(二)动态绑定、计算属性和事件监听
目录 一.为属性绑定变量 1. v-bind的基本使用 2. v-bind动态绑定class(对象语法) 3. v-bind动态绑定class(数组语法) 4. v-bind动态绑定style(对象语 ...
- 《从零开始学Swift》学习笔记(Day 50)——扩展计算属性、方法
原创文章,欢迎转载.转载请注明:关东升的博客 可以在原始类型上扩展计算属性,包括实例计算属性和静态计算属性.添加计算属性的定义,与普通的计算属性的定义是一样的. 实例计算属性示例:在网络编程时,为了减 ...
- CSS filter滤镜试玩
1.模糊(blur). 用法:给相应元素设置高斯模糊,传入的px数值越大越模糊. 2.亮度(brightness). 用法:给元素设置亮度,0%为全黑,100%为元素原始亮度,>100%表示会比 ...
- Knockout开发中文API系列3–使用计算属性
计算属性 如果你已经有了一个监控属性 firstName和lastName,如果你想显示全名该怎么做呢?这个时候你就可以通过计算属性来实现,这个方法依赖于一个或多个监控属性,如果任何依赖对象发生改变他 ...
- CSS中filter滤镜学习笔记
1.CSS静态滤镜样式 (filter)(只有IE4.0以上支持) CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, . ...
- CSS中filter滤镜的学习笔记
1.CSS静态滤镜样式 (filter)(只有IE4.0以上支持) CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, . ...
- 【转载】CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产
文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/ 原文链接:https://www.zhangxinxu.com/wordpress/2018/11/css-f ...
- Android 之计算控件颜色透明度
Android 之计算控件颜色透明度 1.UI会给一个数值,例如:#EFE000,透明度30% 2.用255乘以30%等于76.5,然后四舍五入等于77 3.用计算器将十进制的77转成十六进制的数据为 ...
- 兼容性背景颜色半透明CSS代码(不影响内部子元素)
如何简单兼容性的实现父元素是半透明背景色,而子元素不受影响. 兼容所有浏览器的背景颜色半透明CSS代码: background-color: rgba(, , , .); filter: progid ...
随机推荐
- 【每日一包0005】arr-flatten
github地址:https://github.com/ABCDdouyae... arr-flatten 将多维数组展开成一维数组 文档地址:https://www.npmjs.com/packag ...
- 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 ...
- 高级软件测试技术-任务进度和总结-Day04
任务进度11-16 使用工具 Jira 小组成员 华同学.郭同学.穆同学.沈同学.覃同学.刘同学 任务进度 经过了这几天的学习和小组成员的努力,虽然其中还准备了考试,但是大家还是最终按时完成了任务,今 ...
- CANopen的相关学习
CANopen是一种架构在控制局域网路(Controller Area Network, CAN)上的高层通讯协定,包括通讯子协定及设备子协定常在嵌入式系统中使用,也是工业控制常用到的一种现场总线. ...
- 打开Excel提示内存不足
来越南出差第一天,有个越南妹子跟我反应说Excel打不开,提示的是很常见的“内存不足”的错误, 这种问题一般的判断就是打开的程序太多了,关掉一些就可以了,重启都没解决, 在网上找了下,腾讯管家的这篇h ...
- 非GUI模式运行Jmeter脚本
一.应用场景 日常测试过程中发现,在大数量并发时,jmeterGUI界面经常宕机.卡死,在这种情况下我们就需要使用命令行来执行脚本了(非GUI模式). 二.命令行模式优点 1.节约系统资源,无需启动界 ...
- SpringMVC +Spring + MyBatis + Mysql + Redis(作为二级缓存) 配置
转载:http://blog.csdn.net/xiadi934/article/details/50786293 项目环境: 在SpringMVC +Spring + MyBatis + MySQL ...
- 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 ...
- hibernate 2 多对多映射
一.实体类 1.Classes.java package cn.gs.wwg.entity; import java.util.Set; public class Classes { private ...
- Android Studio编译报错Could not reserve enough space for 2097152KB object heap解决方法
环境变量中添加