CSS 阶梯值数学函数现已纳入 Baseline 2024

现在,所有主流引擎都支持 CSS 阶梯值数学函数: round(), mod(), 和 rem()

阶梯值函数都会根据另一个值对给定值进行转换 step value

round() 函数接受一个要舍入的值, 舍入间隔和可选的舍入策略。 系统会根据舍入策略对数值进行四舍五入, 舍入间隔的最接近的整数倍。

要舍入的值或舍入间隔的值应为 CSS 自定义属性。虽然对这两个值进行硬编码是有效的, 如果您可以自行计算数值,则需对数值进行四舍五入。

以下 CSS 会将 --my-font-size 的值四舍五入为 1rem 的区间。

font-size: round(var(--my-font-size), 1rem);

默认舍入策略为 nearest。前面的示例包含 舍入策略如下:

font-size: round(nearest,var(--my-font-size), 1rem);

舍入策略可能的值包括:

  • up:相当于 JavaScript Math.ceil() 方法。将值向上舍入 舍入间隔的最接近的整数倍。
  • down:相当于 JavaScript Math.floor() 方法。将值四舍五入 向下取整为舍入间隔的最接近的整数倍。
  • nearest(默认):等同于 JavaScript Math.round()。四舍五入 向上或向下舍入到舍入间隔的最接近的整数倍。
  • to-zero:相当于 JavaScript Math.trunc() 方法。将值四舍五入 为更接近于零的舍入间隔的最接近整数倍。

如需详细了解round(),请访问 新的 CSS 数学公式:round()、 作者:Dan Wilson。

rem()mod() 函数

rem()mod() CSS 函数的工作方式与 JavaScript 类似 余数运算符 (%)。它们取两个值,第一个(被除数)除以第二个(除数), 并返回余数。

margin: rem(18px, 5px); /* returns 3px */

这两个函数之间的区别在于 rem() 始终带有符号 被除数,因此如果第一个值为正数,则返回值 为正数。mod() 函数接受除数的符号。

如需详细了解 rem()mod(),请访问 新的 CSS 数学公式:rem()mod(), 作者:Dan Wilson。