mod()
Baseline 2024
Newly available
Since May 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
**mod()** CSS 函数 返回第一个参数除以第二个参数后剩余的模数，类似于 JavaScript 的 取余运算符 (%)。模数是在一个操作数（被除数）被另一个操作数（除数）除时剩余的值。它始终采用除数的符号。
例如，CSS
mod(21, -4)函数返回-1的余数。当 21 除以 -4 时，结果是 5，余数是 -1。完整的计算是21 / -4 = -4 * 5 - 1。
语法
css
/* Unitless <number> */
line-height: mod(7, 2); /* 1 */
line-height: mod(14, 5); /* 4 */
line-height: mod(3.5, 2); /* 1.5 */
/* Unit based <percentage> and <dimension> */
margin: mod(15%, 2%); /* 1% */
margin: mod(18px, 4px); /* 2px */
margin: mod(19rem, 5rem); /* 4rem */
margin: mod(29vmin, 6vmin); /* 5vmin */
margin: mod(1000px, 29rem); /* 72px - if root font-size is 16px */
/* Negative/positive values */
rotate: mod(100deg, 30deg); /* 10deg */
rotate: mod(135deg, -90deg); /* -45deg */
rotate: mod(-70deg, 20deg); /* 10deg */
rotate: mod(-70deg, -15deg); /* -10deg */
/* Calculations */
scale: mod(10 * 2, 1.7); /* 1.3 */
rotate: mod(10turn, 18turn / 3); /* 4turn */
transition-duration: mod(20s / 2, 3000ms * 2); /* 4s */
Parameters
mod(dividend, divisor) 函数接受两个逗号分隔的值作为其参数。这两个参数必须具有相同的类型，数字、维度 或 <percentage>，函数才能有效。虽然两个参数中的单位不需要相同，但它们需要具有相同的维度类型，例如 <length>、<angle>、<time> 或 <frequency> 才能有效。
dividend-
解析为
<number>、<dimension>或<percentage>的计算，表示被除数。 divisor-
解析为
<number>、<dimension>或<percentage>的计算，表示除数。
Return value
返回一个 <number>、<dimension> 或 <percentage>（对应于参数的类型），表示模数，即剩余的操作。
- 如果
divisor为0，则结果为NaN。 - 如果
dividend为infinite，则结果为NaN。 - 如果
divisor为正，则结果为正 (0⁺)，如果divisor为负，则结果为负 (0⁻)。
Formal syntax
<mod()> =
mod( <calc-sum> , <calc-sum> )
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
规范
| Specification |
|---|
| CSS Values and Units Module Level 4 # funcdef-mod |
浏览器兼容性
BCD 表格仅在浏览器中加载