有一种方法有pi在CSS计算?

前端之家收集整理的这篇文章主要介绍了有一种方法有pi在CSS计算?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个进度条的SVG圆动画,其中stroke-dashoffset从0,半径到半径,0(0%到100%)的动画。

圆周长的方程为pi * d。有没有办法使用CSS计算函数,其中它可以使用pi的值,而不只是一个舍入值(如3.14)?

解决方法

在CSS中没有像PI变量这样的东西,不幸的是。

然而..

你可以让use of CSS variables为它分配一个数字,这是因为它有一个really,really bad browser support.

这将工作像:

:root {
  --PI: 3.14159265358979; // enter the amount of digits you wish to use
}

.circle {
    width: calc(100 * var(--PI));
}

最好的解决方案是使用SASS或Less等预处理器来分配PI变量,这将类似于SASS中的以下示例:

$pi: 3.14159265358979 // amount of digits you wish to use

.circle {
    width: calc(100 * ${pi});
}

编辑:如在评论中提到,一些浏览器(Safari IE)舍入到2小数,其中Chrome和Firefox可以四舍五入到(至少)4小数。

猜你在找的CSS相关文章