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 cos() 函数
参考:CSS exp() 函数
参考:CSS log() 函数
参考:CSS pow() 函数
参考:CSS sin() 函数
参考:CSS tan() 函数