CSS 变量中如何将数字转换为字符串并与百分号连接?

CSS 变量中如何将数字转换为字符串并与百分号连接?

css变量中数字如何转换为字符串以供使用

css变量中,数字变量无法与百分号连接,而字符串变量又无法用calc计算,如何同时解决这两个问题?

解决方案:

借助于counter-reset的特性,我们可以将数字变量转换为字符串。具体操作如下:

  1. 在声明css变量时,添加counter-reset属性:

    立即学习前端免费学习笔记(深入)”;

    .progress-radial {  --progress: 25;  counter-reset: showProgress var(--progress); }
    登录后复制
  2. 使用counter()函数获取转换后的字符串

    .progress-radial b:after {  content: counter(showProgress)"%"; }
    登录后复制

    这样,即可在转换后的字符串中同时包含数字和百分号。

完整的代码示例:

.progress-radial {     --progress: 25;     counter-reset: showProgress var(--progress); } .progress-radial:before {     transform: rotate(calc(var(--progress)*3.6deg)) translate(0, -72.5px); } .progress-radial b:after {     content: counter(showProgress)"%"; }
登录后复制
<div class="progress-radial">展示进度值:<b></b> </div>
登录后复制

© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容