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.
Hàm mod() trong CSS là một hàm trả về phần dư khi chia tham số thứ nhất cho tham số thứ hai, tương tự toán tử phần dư (%) trong JavaScript. Phần dư là giá trị còn lại khi một toán hạng (số bị chia) được chia cho toán hạng thứ hai (số chia). Kết quả luôn mang dấu của số chia.
Phép tính là a - (Math.floor(a / b) * b). Ví dụ, hàm CSS mod(21, -4) trả về phần dư -3. Phép tính đầy đủ là 21 - (Math.floor(21 / -4) * -4). Khi chia 21 cho -4, kết quả là -5.25. Giá trị này được làm tròn xuống thành -6. Nhân -6 với -4 được 24. Lấy 21 trừ 24, phần dư là -3.
Cú pháp
/* <number> không có đơn vị */
line-height: mod(7, 2); /* 1 */
line-height: mod(14, 5); /* 4 */
line-height: mod(3.5, 2); /* 1.5 */
/* <percentage> và <dimension> có đơn vị */
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 - nếu font-size gốc là 16px */
/* Giá trị âm/dương */
rotate: mod(100deg, 30deg); /* 10deg */
rotate: mod(135deg, -90deg); /* -45deg */
rotate: mod(-70deg, 20deg); /* 10deg */
rotate: mod(-70deg, -15deg); /* -10deg */
/* Các phép tính */
scale: mod(10 * 2, 1.7); /* 1.3 */
rotate: mod(10turn, 18turn / 3); /* 4turn */
transition-duration: mod(20s / 2, 3000ms * 2); /* 4s */
Tham số
Hàm mod(dividend, divisor) nhận hai giá trị phân tách bằng dấu phẩy làm tham số. Cả hai tham số phải có cùng kiểu, là number, dimension, hoặc <percentage>, để hàm hợp lệ. Trong khi các đơn vị trong hai tham số không cần giống nhau, chúng cần thuộc cùng loại dimension, chẳng hạn như <length>, <angle>, <time>, hoặc <frequency> để hợp lệ.
dividend-
Một phép tính trả về giá trị
<number>,<dimension>, hoặc<percentage>đại diện cho số bị chia. divisor-
Một phép tính trả về giá trị
<number>,<dimension>, hoặc<percentage>đại diện cho số chia.
Giá trị trả về
Trả về giá trị <number>, <dimension>, hoặc <percentage> (tương ứng với kiểu của các tham số) đại diện cho phần dư, tức là phần còn lại của phép tính.
- Nếu
divisorlà0, kết quả làNaN. - Nếu
dividendlà vô cực, kết quả làNaN. - Nếu
divisordương, kết quả là dương (0⁺); nếudivisorâm, kết quả là âm (0⁻).
Cú pháp chính thức
<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
Thông số kỹ thuật
| Specification |
|---|
| CSS Values and Units Module Level 4 # funcdef-mod |