时隔两年，Chrome也支持round等CSS数学函数了
原文中文，约4600字，阅读约需11分钟。
📝
内容提要
文章介绍了CSS中的mod()、rem()和round()函数。mod()和rem()用于计算余数，round()用于取整，支持多种方法。round()在开发中很实用，如确保响应式字体大小为整数，避免图标缝隙，还能模拟animation的steps()效果。文章还提到CSS其他数学函数的支持进展。
❓
Q&A
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()函数可以将响应式字体大小取整，避免因小数导致的图标边缘缝隙。
🏷️
