时隔两年，Chrome也支持round等CSS数学函数了
内容提要
文章介绍了CSS中的mod()、rem()和round()函数。mod()和rem()用于计算余数，round()用于取整，支持多种方法。round()在开发中很实用，如确保响应式字体大小为整数，避免图标缝隙，还能模拟animation的steps()效果。文章还提到CSS其他数学函数的支持进展。
关键要点
-
CSS中的mod()、rem()和round()函数现在在Chrome浏览器中也得到了支持。
-
mod()函数用于计算余数，类似于JavaScript的余数运算符。
-
rem()函数返回第一个参数除以第二个参数后的余数，功能与mod()相似。
-
mod()和rem()函数在日常开发中使用机会较少。
-
round()函数设计巧妙，支持多种取整方法，如向上取整、向下取整、四舍五入等。
-
round()函数可以确保响应式字体大小为整数，避免图标和边框出现缝隙。
-
round()函数的最后一个参数可以模拟CSS动画中的steps()效果。
-
CSS中其他数学函数的支持进展包括min()/max()/clamp()、sin()/cos()、sqrt()、pow()、exp()和log()等。
-
Chrome浏览器对数学函数的支持是分批进行的，尚未一次性支持所有函数。
延伸问答
Chrome浏览器现在支持哪些CSS数学函数？
Chrome浏览器现在支持mod()、rem()和round()函数。
mod()和rem()函数有什么区别？
mod()函数返回第一个参数除以第二个参数的取模结果，而rem()函数返回第一个参数除以第二个参数后的余数。
round()函数在CSS中有什么实际应用？
round()函数可以确保响应式字体大小为整数，避免图标和边框出现缝隙，还能模拟CSS动画中的steps()效果。
如何使用round()函数实现向上取整？
可以使用语法round(up, <valueToRound>, <roundingInterval>)，例如：canvas { border: round(up, 1.01px, 1px) solid; }。
CSS中的数学函数支持进展如何？
CSS中的数学函数支持分批进行，已支持min()/max()/clamp()、sin()/cos()、sqrt()、pow()、exp()、log()等，最近支持mod()、rem()和round()。
为什么使用round()函数可以避免图标缝隙？
使用round()函数可以将响应式字体大小取整，避免因小数导致的图标边缘缝隙。
