
css 变量中数字转换为字符串操作方法
在 css 代码中,如果将变量 --progress 设置为数字,则无法将其与百分号符号连接。但是,如果将其设置为字符串,则无法使用 calc() 函数对其进行计算。
要同时解决这两个问题,我们可以使用 counter-reset 属性:
.progress-radial {
--progress: 25;
}
.progress-radial:before {
transform: rotate(calc(var(--progress) * 3.6deg)) translate(0, -72.5px);
}
.progress-radial b:after {
counter-reset: showprogress var(--progress);
content: counter(showprogress) "%";
}展示进度值:
在这个代码中,我们使用 counter-reset 为一个名为 showprogress 的计数器重置值为 var(--progress)。然后,我们在 b:after 伪元素中使用 counter() 函数引用该计数器并将其附加到百分号符号上。
Perl学习手札是台湾perl高手写的一篇文章,特打包为chm版,方便大家阅读。 关于本书 1. 关于Perl 1.1 Perl的历史 1.2 Perl的概念 1.3 特色 1.4 使用Perl的环境 1.5 开始使用 Perl 1.6 你的第一个Perl程序 2. 标量变量(Scalar) 2.1 关于标量 2.1.1 数值 2.1.2 字符串 2.1.3 数字与字符串转换 2.2 使用你自己的变量 2.3 赋值 2.3.1 直接设定 2.3.2 还可以这样 2.4 运算 2.5 变量的输出/输入 2.
立即学习“前端免费学习笔记(深入)”;
这样,--progress 就可以同时作为一个数字(用于计算)和一个字符串(用于连接百分号符号)。









