有趣且重要的css知识合集(6)动态控制css伪元素【var()】
在vue里,js和css的属性可以随意控制,比如:class和:style,但是我们想要动态控制伪元素的属性该怎么做呢?
比如下图,右下角小圆圈就是通过伪元素定义上去的,那我们想要自由实现伪元素的显示和隐藏该怎么做呢?那就可以通过 var() var()函数可以代替元素中任何属性中的值的任何部分,想要具体了解的可以看官方文档噢~下面是链接
var()
0、相关概念
var() 是css自定义变量,使用为var(--*), *号为变量,为什么必须加双短横线呢?,因为$*被 Sass 用掉了,@*
被 Less 用掉了。为了不产生冲突,官方的 CSS 变量就改用两根连词线了,有两个参数,第二参数为默认值,当*变量不存在时,则直接使用默认值
1、示例图
伪元素显示:
伪元素隐藏:
2、使用方法
通过 --display 这个变量来控制
.resize{&::after{content: '';position: absolute;border-radius: 50%;width: 8px;height: 8px;border: 2px solid rgb(2, 167, 240);background-color: #fff;right: -4px;bottom: -4px;cursor: nwse-resize;display: var(--display);}
}
<template><div class="resize" :style="rectStyle"></div>
</template>
<script>export default{data() {return {show: false}}computed: {rectStyle: {'--display': this.show ? 'block' : 'none'}}}
</script>
3、拓展知识
1、css中使用自定义变量已经很多地方啦~比如你可以到你项目里看到 :root的使用,在:root里声明的为全局作用域,下属所有选择器都可以继承此属性,当然你定义在一个class里就是局部作用域啦
2、如果变量值是一个字符串,可以与其他字符串拼接
--hello: 'hello';
--world: var(--hello)' world';
3、如果变量值是数值,不能与数值单位直接连用,要使用的话就用calc拼接
.resize{ --distance: 10; margin-left: calc(var(--distance) * 1px);
}
4、如果变量值带有单位,就不能写成字符串,直接写出来
.resize{--distance: 10px;margin-left: var(--distance);
}
5、关于支持css变量和不支持css变量的浏览器兼容
.resize{--distance: 10px;margin-left: var(--distance);margin-left:10px;
}// 可以使用@support命令进行检测
@supports ( (--resize: 10px)) {/* 支持*/
}
@supports ( not (--resize: 10px)) {/* 不支持 */
}
有趣且重要的css知识合集(6)动态控制css伪元素【var()】相关推荐
- 有趣且重要的css知识合集(1)纯css实现div左右拖拽效果
目前我看主流的都是用js来实现div拖拽效果,不过我个人觉得一直监听拖拽,会耗费很大的性能,毕竟监听盒子的宽高这些属性,都会触发浏览器的回流,并且我看了很多博客,他们是能用css实现div左右拖拽效果 ...
- 有趣且重要的JS知识合集(18)浏览器实现前端录音功能
1.主题描述 兼容多个浏览器下的前端录音功能,实现六大录音功能: 1.开始录音 2.暂停录音 3.继续录音 4.结束录音 5.播放录音 6.上传录音 2.示例功能 初始状态: 开始录音: 结束录音: ...
- 有趣且重要的Git知识合集(8)git commit 重新提交(—amend —no-edit)
当我们已经commit提交过一次了,然后发现还有些代码没改完,这个时候,很多童鞋都会考虑,再commit一次就行了,但是在git记录中就会出现两条commit,其实问题不大,但是如果有很多这种情况,就 ...
- 有趣且重要的Git知识合集(7)git stash报错 Too many revisions specified: ‘stash@‘ ‘MAA=‘ ‘xml‘ ‘text‘
在我们想要查看stash list中储存的代码时,就先 git stash list 然后会出现下图所示 这时候再输入 git stash show -p stash@{0} 但是,会出现这种报错 T ...
- 有趣且重要的JS知识合集(15)前端上传视频后获取视频的相关信息
通过视频文件上传后监听loadedmetadata事件来获取视频属性 getVideoInfo(file) {return new Promise(resolve => {const video ...
- 写给Android App开发人员看的Android底层知识合集(1-8)
写给Android App开发人员看的Android底层知识合集(1-8) 转自包老师:http://www.cnblogs.com/Jax/p/6864103.html 写给Android App开 ...
- 5去掉button按钮的点击样式_各种好看的小按钮合集,纯css编写,最近在学习时遇到的,记录成为笔记...
写在前面 最近忙着实习的事,前往广州,租房,置办东西等等.用碎片化的时间看了一些博客,也看到不少我认为很不错的通过纯css来打造的按钮样式.记录下来以后开发的时候或许能用上. 亮起来按钮 <di ...
- button按钮样式_各种好看的小按钮合集,纯css编写,最近在学习时遇到的,记录成为笔记...
写在前面 最近忙着实习的事,前往广州,租房,置办东西等等.用碎片化的时间看了一些博客,也看到不少我认为很不错的通过纯css来打造的按钮样式.记录下来以后开发的时候或许能用上. 亮起来按钮 < 简 ...
- [css] 有哪些标签是不支持伪元素的?
[css] 有哪些标签是不支持伪元素的? 首先我们要知道伪元素有哪些: ::after ::before ::first-letter ::fist-line (单双冒号皆可) ::selection ...
最新文章
- 机器学习中过拟合、欠拟合与方差、偏差的关系是什么?
- bcrypt如何内置盐?
- php 多表查询输出,ThinkPHP多表查询
- 如何高效排查系统故障?一分钱引发的系统设计“踩坑”案例
- 福建省计算机学会 noip比赛,重磅!福州一三附学生领衔全省前九名!他们将代表福建参加全国比赛!...
- java 类加载的机制面试题_java 类加载机制 阿里面试题
- System.arrayCopy()和普通数组复制之间的效率差别
- 2020ccks知识图谱问答总结
- PcShare2005代码阅读(1)
- LeetCode刷题笔记一:(两数之和)
- mysql 批量执行sql语句_MySQL中批量执行SQL语句
- 2022年国家法定节假日放假时间安排
- CentOS 7报错:Failed to start xxx.service: Unit is masked
- 无人超市信息管理系统——需求分析
- (150)FPGA面试题-Verilog实现2的幂次方乘法运算
- 亚洲销售女神徐鹤宁经典语录——太过精辟!
- 滴水课后作业(6-10)
- CSP-J2019普及组复赛T4:加工零件
- mkdir: Permission denied: user=root, access=WRITE, inode=/lcy/test5.txt:hdfs:hdfs:drwxr-xr-x
- 单例/单体模式(Singleton)