CSS 【详解】自定义属性(又名 CSS 变量)

声明变量 - -

变量命名规则

  • 支持数字命名
  • 支持使用短横线和空格命名
  • 支持中文等CJK文字
  • 不支持包含$、[、]、^、(、)、%、"等特殊字符的命名,要使用这些特殊字符,需要使用反斜杠转义。

变量值

可以是任意值或表达式

 --direction: to top;--gradientColor: deeppink, deepskyblue;--gradient: to top, deeppink, deepskyblue;--linear-gradient: linear-gradient(to top, deeppink, deepskyblue);

变量作用域

后代元素可以原封不动地继承祖先元素设置的CSS自定义属性值。

body {--color: deepskyblue;
}
.box {background-color: var(--color);
}

全局变量

:root {--borderColor: #ccc;
}

变量的特征

变量值可以相互传递

body {--green: #4CAF50;   --successColor: var(--green);
}

css变量不能给自己赋值

/* 这种写法是非法的 */
--primary-color: var(--primary-color, #2a80eb);

css变量不能用于@media媒体特征的值

:root {--maxWidth: 640px;
}
/* 不合法,语法无效 */
@media (max-width: var(--maxWidth)) {}

CSS变量作为content属性值没有任何效果

/* 无效 */
.bar::before {content: var(--percent);
}

使用变量 var()

p {  background-color: var(--any-what, deepskyblue); 
}

deepskyblue为缺省值,当–any-what无效时使用 deepskyblue

var() 函数参数非法时

body {--color: 20px;background-color: deeppink;background-color: var(--color, deepskyblue);
}

最终 body 的背景色为 transparent,因为background-color的初始值是transparent

var()函数只要第一个参数值可能有效,哪怕这个参数值是一个乱七八糟的东西,依然会正常解析。如果第一个参数值是不合法的,则var()函数解析为当前CSS属性的初始值或继承值(如果有继承性),也就是按照unset全局关键字的规则渲染。(注意,只是渲染规则类似,并不等同于直接设置unset关键字。)

var() 函数的空格尾随特性

html {font-size: 14px;
}
body {--size: 20;font-size: 16px;font-size: var(--size)px;
}

最终body的font-size大小是14px

原理:此处font-size:var(–size)px等同于font-size:20 px,注意,20后面有一个空格,这属于不合法的font-size属性值。由于语法上var(–size)px又是合法的,因此会重置font-size:16px,最终使用父元素设置的字号大小14px。

改进方案是:

body {--size: 20;   font-size: calc(var(--size) * 1px);
}

body {--size: 20px;   font-size: var(--size);
}

js 获取CSS全局变量的值

let borderColor= getComputedStyle(document.documentElement).getPropertyValue("--borderColor");
// 获取 --color CSS变量值
var cssVarColor = getComputedStyle(box).getPropertyValue('--color'); 
// 输出cssVarColor值,结果是deepskyblue 
console.log(cssVarColor);

js 修改CSS全局变量的值

document.documentElement.style.setProperty("--borderColor","green");

js 设置CSS局部变量的值

<div id="box"><img src="1.jpg" style="border: 10px solid var(--color);">
</div>
box.style.setProperty('--color', 'deepskyblue');

实战范例

  • 借助CSS计数器在页面中显示CSS变量的值
/* 有效 */
.bar::before {counter-reset: progress var(--percent);content: counter(progress);
}

进度条

https://blog.csdn.net/weixin_41192489/article/details/121007837

多处使用的svg图像

:root {--icon-check: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32'%3E%3Cpath 
fill='green' d='M28.027 5.161l-17.017 17.017-7.007-7.007-3.003 3.003 10.010 10.010 
20.020-20.020z'%3E%3C/path%3E%3C/svg%3E");
}
.icon-check {background: var(--icon-check) no-repeat center / 16px;/* 尺寸限制 */display: inline-block;width: 20px; height: 20px;
}
.valid-pass::after {content: var(--icon-check);/* 尺寸限制 */display: inline-block;width: 20px; height: 20px;
}

效果见 https://demo.cssworld.cn/new/8/1-3.php

按钮点击特效

效果见 https://demo.cssworld.cn/new/8/1-1.php

button {/* 这里的空格很重要 */--open: ;color: #2a80eb;-webkit-text-fill-color: #fff;border-radius: 4px;padding: 9px 20px;border: 1px solid var(--open, rgba(0,0,0,.1));box-shadow: var(--open, inset 0 1px 2px rgba(0,0,0,.1));background: var(--open, linear-gradient(#0003, transparent)) currentColor;text-shadow: var(--open, -1px -1px #0003);transition: .15s;
}
button:active {/* 任意全局关键字都可以 */--open: inherit;
}

实现原理

  • –open:;前面有一个空格,也就是–open属性值是一个空格,在语法上是可能有效的。但是空格对于box-shadow和background等CSS属性是无效的,因此,box-shadow和background等CSS属性均解析为初始值

  • 点击按钮触发:active伪类后,会运行–open:inherit这个CSS声明,全局CSS关键字作为CSS自定义属性值一定无效,因此var()函数会使用后备CSS属性值进行渲染

自定义 CSS 函数 keyword()

https://blog.csdn.net/weixin_41192489/article/details/121021277

模拟 attr() 函数

https://blog.csdn.net/weixin_41192489/article/details/121022170

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android liveData 监听异常,fragment可见时才收到回调记录

背景&#xff1a;在app的fragment不可见的情况下使用&#xff0c;发现注册了&#xff0c;但是没有回调导致数据一直未更新&#xff0c;只有在fragment可见的时候才收到回调 // 观察通用信息mLightNaviTopViewModel.getUpdateCommonInfo().observe(this, new Observer<Common…

python 之修改host配置

背景&#xff1a;生产环境登录 test.ai.com &#xff0c;如果要登录验收的 test.ai.com 要改host配置&#xff0c;所以写了个python脚本 host生产环境配置为 # 192.163.0.0 test.ai.com host验收环境为 192.163.0.0 test.ai.com 不加host配置默认是生成哈 import os # C:…

[嵌入式 C 语言] 按位与、或、取反、异或

若协议中如下图所示&#xff1a; 注意&#xff1a; 长度为1&#xff0c;表示1个字节&#xff0c;也就是0xFF&#xff0c;也就是 1111 1111 &#xff08;这里0xFF只是单纯表示一个数&#xff0c;也可以是其他数&#xff0c;这里需要注意的是1个字节的意思&#xff09; 一、按位…

第三课网关作用

实验拓扑图&#xff1a; 基础配置&#xff1a; PC1的基础配置 PC2的基础配置&#xff1a; PC4的基础配置 AR1添加PC4网段: 并且添加pc1,pc2的网段。 并且添加pc1,pc2的网段。 原理&#xff1a;PC4先把数据交给100.100.100.1&#xff0c;交给了路由器&#xff0c;路由器再把数…

瑞萨RH850 RTC计时进位异常

RH850 MCU的RTC&#xff08;实时时钟&#xff09;采用BCD&#xff08;二进制编码的十进制&#xff09;编码格式&#xff0c;支持闰年自动识别&#xff0c;并具有秒、分、时、日、周、月、年的进位功能。其中&#xff0c;秒和分为60进位&#xff0c;时为12或24进位&#xff0c;周…

Qt Design Studio 4.5现已发布

Qt Design Studio现已强势回归&#xff0c;生产力和可用性均得到大幅提升。无论是直观的3D编辑界面&#xff0c;还是与Figma和Qt Creator的无缝连接&#xff0c;新版Qt Design Studio将为您带来更好的产品开发体验。快来深入了解Qt Design Studio的全新功能吧&#xff01; 为3…

期权交易必须弄懂的期权波动率是什么?

今天带你了解期权交易必须弄懂的期权波动率是什么&#xff1f;波动率是金融资产价格波动的度量&#xff0c;它衡量了资产的收益率的不确定性&#xff0c;常用于反映金融资产的风险水平。 期权波动率是衡量资产价格偏离平均值的程度&#xff0c;偏离程度越大&#xff0c;期权波…

Animate软件基础:重命名图层或文件夹

默认情况下&#xff0c;Animate 会按照创建顺序向新图层分配名称&#xff1a;图层 1、图层 2&#xff0c;依此类推。为了更好地反映图层的内容&#xff0c;可以对图层进行重命名。 如果需要对图层或图层文件夹进行重命名&#xff0c;请执行下列操作之一&#xff1a; 双击时间轴…

迂回战术:“另类“全新安装 macOS 15 Sequoia beta2 的极简方法

概述 随着 WWDC 24 的胜利闭幕&#xff0c;Apple 平台上各种 beta 版的系统也都“跃跃欲出”&#xff0c;在 mac 上自然也不例外。 本次全新的 macOS 15 Sequoia&#xff08;红杉&#xff09;包含了诸多重磅升级&#xff0c;作为秃头开发者的我们怎么能不先睹为快呢&#xff1…

一条SQL查询语句是如何执行的?

以一条简单的SQL为例。 mysql> select * from T where ID10&#xff1b; 我们看到的只是一条输入语句&#xff0c;但是在MYQL里面有他的一套执行流程&#xff0c;今天来分析一下这个问题。 基本架构图 首先&#xff0c;给出MYSQL的基本架构图。MYSQL可以分成Server层和存…

ARM功耗管理标准接口之ACPI

安全之安全(security)博客目录导读 思考&#xff1a;功耗管理有哪些标准接口&#xff1f;ACPI&PSCI&SCMI&#xff1f; Advanced Configuration and Power Interface Power State Coordination Interface System Control and Management Interface ACPI可以被理解为一…

Outlook邮件提醒通知功能详解:设置教程!

Outlook邮件提醒通知使用指南&#xff1f;如何个性设计邮件通知&#xff1f; 为了帮助用户更好地管理邮件&#xff0c;Outlook提供了强大的邮件提醒通知功能。AokSend将详细介绍如何设置和使用Outlook邮件提醒通知功能&#xff0c;以提高工作效率和管理时间的能力。 Outlook邮…

聚类方法K-means和DBSCAN,附matlab代码

目录 引言 聚类的主要特点 聚类算法的主要步骤 聚类的应用场景 聚类算法的局限性 聚类方法 1. K-means聚类算法 2. DBSCAN聚类算法 3. 层次聚类算法 引言 聚类&#xff08;Clustering&#xff09;是数据挖掘和统计学中的一个重要概念&#xff0c;它是一种无监督学习的…

AI自动生成PPT哪个软件好?揭秘5款自动生成PPT的工具

在职场的竞技场上&#xff0c;演示文稿如同战士的利剑&#xff0c;其锋芒直接影响着演讲者的说服力。 然而&#xff0c;制作一份高质量的PPT往往需要耗费大量时间与精力。随着科技的进步&#xff0c;AI自动生成PPT成为了提升效率的新选择。面对市场上琳琅满目的软件&#xff0…

C++报警:warning: zero as null pointer constantstddef.h

源码和警告内容 解决办法&#xff1a; select(0,nullptr,nullptr,nullptr,&delay); 关于NULL和nullptr的区别&#xff1a; 在C中&#xff0c;nullptr和null&#xff08;通常指的是NULL宏&#xff0c;因为C标准中并没有直接定义null关键字&#xff09;都用于表示空指针&am…

揭秘控制流的秘密:Java中的if, for, while,你真的会用吗?

在编程的浩瀚宇宙中&#xff0c;控制流语句如同星辰&#xff0c;引领着代码的航向。今天&#xff0c;我们将深入探讨Java中至关重要的控制流语句——if, for, while&#xff0c;以及它们的变体。无论你是一名初学者&#xff0c;还是有着丰富经验的开发者&#xff0c;这篇文章都…

C++:入门基础

目录 C版本 C参考文档 C输入输出 C对比C 命名空间 相较C语言它存在的意义 命名空间的使用 缺省参数 全缺省 半缺省 函数重载 引用 注意事项 引用和指针的关系&#xff08;区别&#xff09; inline 为什么要有inline&#xff1f; 注意事项 nullptr C版本 时间…

今天小编强烈推荐几款国产APP!

AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频https://aitools.jurilu.com/ 今天小编强烈推荐几款国产APP,算得上是国产之光。如果能帮助到大家&#xff0c;别忘了给小编点点赞加关注哟&#xff01;更多精彩还在后面。 一、…

新国立祭出视频生成“无限宝石“:2300帧仅需5分钟,提速100倍

天下武功唯快不破—— 火云邪神 前一段时间&#xff0c;想必大家都有被各种文生视频给刷屏&#xff0c;但当看完之后&#xff0c;不知道大家是否都有一种意犹未尽的感觉&#xff1a;“这也太短了吧&#xff0c;我还没看够呢”。受限于机器资源与生成效率&#xff0c;目前大部分…

WebRTC批量发送消息API接口的特性有哪些?

WebRTC批量发送消息api接口怎么样&#xff1f;接口性能怎么用&#xff1f; WebRTC技术允许浏览器和移动应用进行实时通信。通过WebRTC&#xff0c;开发者可以构建视频、语音、数据共享等应用。AokSend将重点探讨WebRTC批量发送消息API接口的特性。 WebRTC批量发送消息API接口…