现在,所有主流引擎都支持 CSS 阶梯值数学函数: round(), mod(), 和 rem()。
阶梯值函数都会根据另一个值对给定值进行转换 step value。
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
:相当于 JavaScriptMath.ceil()
方法。将值向上舍入 舍入间隔的最接近的整数倍。down
:相当于 JavaScriptMath.floor()
方法。将值四舍五入 向下取整为舍入间隔的最接近的整数倍。nearest
(默认):等同于 JavaScriptMath.round()
。四舍五入 向上或向下舍入到舍入间隔的最接近的整数倍。to-zero
:相当于 JavaScriptMath.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。