CSS `Geometry Functions` (`round()`, `mod()`) (提案) 在布局中的应用

各位前端的靓仔靓女们,早上好/下午好/晚上好!今天咱们来聊聊CSS里即将加入的两位新朋友:round() 和 mod()。别听到函数就害怕,这俩家伙其实挺接地气的,能帮咱们在布局上耍出不少新花样。 第一部分:round() – 四舍五入界的扛把子 round() 函数,顾名思义,就是用来四舍五入的。但是CSS的round()可比你想象的要强大,它不只是简单的取整,而是可以指定精度和舍入策略。 1. 基本语法 round(value, rounding-increment) value: 需要进行舍入的数值。 rounding-increment: 舍入的增量,也就是精度。 2. 舍入策略(Rounding Strategies) CSS的round()默认的舍入策略是nearest,也就是最接近的原则。除此之外,还有其他的策略,不过目前浏览器支持情况还不太好,咱们先了解一下,以后说不定就能用上了。 nearest: 舍入到最接近的倍数。 up: 向上舍入到最接近的倍数。 down: 向下舍入到最接近的倍数。 to-zero: 向零方向舍入到最接近的倍数。 from-zero …