CSS3中的var()函数

目录

定义:

语法:

用法:


定义:

var()函数是一个 CSS 函数用于插入自定义属性(有时也被称为“CSS 变量”)的值

语法:

var(custom-property-name, value)

函数的第一个参数是要替换的自定义属性的名称。函数的第二个参数是可选的,用作回退值。如果第一个参数引用的自定义属性无效,则该函数将使用第二个值。

备注: 自定义属性的回退值允许使用逗号。例如,var(--foo, red, blue) 将 red, blue 同时指定为回退值;即是说任何在第一个逗号之后到函数结尾前的值都会被考虑为回退值。

用法:

:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}

<custom-property-name> 自定义属性名

在实际应用中它被定义为以两个破折号开始的任何有效标识符。自定义属性仅供作者和用户使用; CSS 将永远不会给他们超出这里表达的意义。

<declaration-value> 声明值(回退值)

回退值被用来在自定义属性值无效的情况下保证函数有值。回退值可以包含任何字符,但是部分有特殊含义的字符除外,例如换行符、不匹配的右括号(如 )] 或 })、感叹号以及顶层分号(不被任何非 var() 的括号包裹的分号,例如 var(--bg-color, --bs;color) 是不合法的,而 var(--bg-color, --value(bs;color)) 是合法的)。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/74913.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

kafka-2.12使用记录

kafka-2.12使用记录 安装kafka 2.12版本 下载安装包 根据你的系统下载rpm /deb /zip包等等, 这里我使用的是rpm包 安装命令 rpm -ivh kafka-2.12-1.nfs.x86_64.rpm启动内置Zookeeper 以下命令要写在同一行上 /opt/kafka-2.12/bin/zookeeper-server-start.sh /opt/kafka-2…

ORA-00845: MEMORY_TARGET not supported on this system

处理故障时&#xff0c;发现startup实例失败&#xff0c;报错ORA-00845: MEMORY_TARGET not supported on this system SYSorcl1> startup; ORA-00845: MEMORY_TARGET not supported on this system 查看alert日志&#xff0c;报错如下 Starting ORACLE instance (normal…

Redis实现消息队列

微信公众号访问地址&#xff1a;Redis实现消息队列 推荐文章&#xff1a; 1、springBoot对接kafka,批量、并发、异步获取消息,并动态、批量插入库表; 2、SpringBoot用线程池ThreadPoolTaskExecutor异步处理百万级数据; 3、为什么引入Redisson分布式锁&#xff1f; 4、Redisson…

Java多线程编程中的线程同步

Java多线程编程中的线程同步 基本概念&#xff1a; ​ 线程同步是多线程编程中的一个重要概念&#xff0c;用于控制多个线程对共享资源的访问&#xff0c;以防止数据的不一致性和并发问题。 在多线程环境下&#xff0c;多个线程同时访问共享资源可能导致数据的竞争和不正确的…

级联(数据字典)

二级级联&#xff1a; 一&#xff1a;新建两个Bean 父级&#xff1a; /*** Description 数据字典* Author WangKun* Date 2023/7/25 10:15* Version*/ Data AllArgsConstructor NoArgsConstructor TableName("HW_DICT_KEY") public class DictKey implements Seri…

elementUI 的上传组件<el-upload>,自定义上传按钮样式

方法一&#xff1a; 原理&#xff1a;调用<el-upload>组件的方法唤起选择文件事件 效果&#xff1a; 页面代码&#xff1a; 1、选择图片按钮 <div class"flex_row_spacebetween btn" click"chooseImg"><span class"el-icon-plus ic…

企业数字化转型:无形资产占比测算(2007-2021年)

在本次数据中&#xff0c;参考张永珅老师的做法&#xff0c;利用无形资产占比测算数字化转型程度。 一、数据介绍 数据名称&#xff1a;企业数字化转型&#xff1a;无形资产占比 数据年份&#xff1a;2007-2021年 样本数量&#xff1a;32960条 数据说明&#xff1a;包括数…

邀请函|澎峰科技邀您参加CCF HPC China2023

一年一度的全球超算盛会&#xff01; 以“算力互联智领未来”为主题的第十九届全国高性能计算学术年会&#xff08;CCF HPC China 2023&#xff09;将于8月24-26日&#xff08;展览23-25日&#xff09;在青岛红岛国际会议展览中心举办。 九大院士领衔 打造顶级超算盛会 力邀…

分类预测 | MATLAB实现SMA-CNN-BiLSTM-Attention多输入分类预测

分类预测 | MATLAB实现SMA-CNN-BiLSTM-Attention多输入分类预测 目录 分类预测 | MATLAB实现SMA-CNN-BiLSTM-Attention多输入分类预测分类效果基本介绍模型描述程序设计参考资料 分类效果 基本介绍 1.MATLAB实现SMA-CNN-BiLSTM-Attention多输入分类预测&#xff0c;CNN-BiLSTM结…

mysql滑动窗口案例

获取学科最高分 SELECT DISTINCT name,subject,MAX(score) OVER (PARTITION by subject) as 此学科最高分数 from scores;获取学科的报名人数 select DISTINCT subject,count(name) over (partition by subject) as 报名此学科的人数 from scores; 求学科总分 SELECT DISTI…

table 根据窗口缩放,自适应

element-plus中&#xff0c;直接应用在页面样式上&#xff0c; ::v-deep .el-table{width: 100%; } ::v-deep .el-table__header-wrapper table,::v-deep .el-table__body-wrapper table{width: 100% !important; } ::v-deep .el-table__body,::v-deep .el-table__footer,::v-d…

面试热题(缺失的第一个正数)

给你一个未排序的整数数组 nums &#xff0c;请你找出其中没有出现的最小的正整数。 请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案。 输入&#xff1a;nums [1,2,0] 输出&#xff1a;3 尝试的路途是痛苦的&#xff0c;不断的尝试新方法&#xff0c;错何尝…

深度学习实战47-利用深度学习技术来解决复杂的人群计数问题,CrowdCountNet模型的应用

大家好,我是微学AI,今天给大家介绍一下深度学习实战47-利用深度学习技术来解决复杂的人群计数问题,CrowdCountNet模型的应用。本篇文章,我将向大家展示如何使用CrowdCountNet这个神奇的工具,以及它是如何利用深度学习技术来解决复杂的人群计数问题。让我们一起进入这个充满…

分布式监控平台——Zabbix

市场上常用的监控软件&#xff1a; 传统运维&#xff1a;zabbix、 Nagios 一、zabbix概述 作为一个运维&#xff0c;需要会使用监控系统查看服务器状态以及网站流量指标&#xff0c;利用监控系统的数据去了解上线发布的结果&#xff0c;和网站的健康状态。 利用一个优秀的监…

idea格式化日志打印

Live Template 需要在Live Templates里面创建一个模板组为MyTemplate 触发时机选择java 1、创建一个loge log.error($content$,$params$); content groovyScript("def params _3.collect {【it {}】}.join(, ); return \" _1 . _2 () exception > (params…

7-15 然后是几点

有时候人们用四位数字表示一个时间&#xff0c;比如 1106 表示 11 点零 6 分。现在&#xff0c;你的程序要根据起始时间和流逝的时间计算出终止时间。 读入两个数字&#xff0c;第一个数字以这样的四位数字表示当前时间&#xff0c;第二个数字表示分钟数&#xff0c;计算当前时…

成集云 | 用友U8采购请购单同步钉钉 | 解决方案

源系统成集云目标系统 方案介绍 用友U8是中国用友集团开发和推出的一款企业级管理软件产品。具有丰富的功能模块&#xff0c;包括财务管理、采购管理、销售管理、库存管理、生产管理、人力资源管理、客户关系管理等&#xff0c;可根据企业的需求选择相应的模块进行集…

C++之std::call_once实例(一百七十五)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

【Vue-Router】重定向

First.vue <template><h1>First Seciton</h1> </template>Second.vue&#xff0c;Third.vue代码同理 UserSettings.vue <template><h1>UserSettings</h1><router-link to"/settings/children1">children1</ro…

Java Vue Uniapp MES生产执行管理系统

本MES系统是一款B/S结构、通用的生产执行管理系统&#xff0c;功能强大&#xff01; 系统基于多年离散智造行业的业务经验组建&#xff0c;主要目的是为国内离散制造业的中小企业提供一个专业化、通用性、低成本的MES系统解决方案。 联系作者获取