CSS mod() 函数

定义和用法

CSS 的 mod() 函数返回一个数(被除数)除以另一个数(除数)后剩余的模数。

举例:mod(9, 2) = 1。(9 / 2 = 4; 4*2 = 8, 余数 =1)

举例:mod(9, -2) = 1。(9 / -2 = 4; 4*-2 = -8, 余数 =-1)

解释:9 / -2 = -4.5,但取整为 -4;-4 * -2 = 8,由于取整方向,实际计算中视为 9 - 8 = 1,或根据余数定义直接得 -1 的相反数 1,注意结果符号与除数相同。实际计算中,mod 的处理可能因实现而异,但通常遵循数学上的取余规则,并考虑除数的符号。

注意:结果始终采用除数的符号。

实例

一些 mod() 的例子:

line-height: mod(9, 2); /* 1 */
line-height: mod(19, 4); /* 3 */
line-height: mod(3.5, 3); /* 0.5 */

padding: mod(9%, 2%); /* 1% */
padding: mod(19px, 4px); /* 3px */
padding: mod(19rem, 4rem); /* 3rem */

rotate: mod(120deg, 25deg); /* 20deg */
rotate: mod(120deg, -25deg); /* -20deg */
rotate: mod(-90deg, 15deg); /* 5deg */
rotate: mod(-90deg, -15deg); /* -5deg */

CSS 语法

mod(dividend, divisor)
描述
dividend 必需。被除数(数字、百分比或尺寸)。
divisor 必需。除数(数字、百分比或尺寸)。

技术细节

版本: CSS4

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

Chrome Edge Firefox Safari Opera
125 125 118 15.4 111

相关页面

参考:CSS acos() 函数

参考:CSS asin() 函数

参考:CSS atan() 函数

参考:CSS atan2() 函数

参考:CSS calc() 函数

参考:CSS cos() 函数

参考:CSS exp() 函数

参考:CSS hypot() 函数

参考:CSS log() 函数

参考:CSS pow() 函数

参考:CSS sin() 函数

参考:CSS sqrt() 函数

参考:CSS tan() 函数