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

发布时间:2024 年 5 月 14 日

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

阶梯值函数都根据另一个步进值转换给定的值。

round() 函数

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() 方法。将值舍入到舍入间隔最接近于零的整数倍数。

在 Dan Wilson 的 The New CSS Math: round() 中详细了解 round()

rem()mod() 函数

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

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

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

在 Dan Wilson 的 The New CSS Math: rem() and mod() 中详细了解 rem()mod()