mod()
mod() CSS 函式返回第一個引數除以第二個引數後的餘數，類似於 JavaScript 的餘數運算子（%）。模數是指被除數除以除數後剩餘的值。它總是與除數符號相同。
計算公式為 a - (Math.floor(a / b) * b)。例如，CSS mod(21, -4) 函式返回餘數 -3。完整的計算過程是 21 - (Math.floor(21 / -4) * -4)。當 21 除以 -4 時，結果是 -5.25。將其向下取整為 -6。將 -6 乘以 -4 得到 24。從原始的 21 中減去 24，餘數是 -3。
語法
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 */
引數
mod(dividend, divisor) 函式接受兩個以逗號分隔的值作為其引數。為了使該函式有效，兩個引數必須具有相同的型別：數字、維度或<percentage>。雖然兩個引數中的單位不必相同，但它們需要具有相同的維度型別，例如<length>、<angle>、<time>或<frequency>，才能有效。
被除數（dividend）-
一個計算結果為
<number>、<dimension>或<percentage>的表示式，表示被除數。 divisor-
一個計算結果為
<number>、<dimension>或<percentage>的表示式，表示除數。
返回值
返回一個<number>、<dimension>或<percentage>（對應於引數的型別），表示模數，即運算的餘數。
- 如果
divisor為0，則結果為NaN。 - 如果
dividend為infinite，則結果為NaN。 - 如果
divisor為正，則結果為正（0⁺）；如果divisor為負，則結果為負（0⁻）。
正式語法
<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
規範
| 規範 |
|---|
| CSS 值和單位模組第 4 級 # funcdef-mod |
瀏覽器相容性
載入中…