函数简介
round() CSS函数会根据选定的舍入策略返回一个四舍五入的数字。
你可以将CSS自定义属性（例如，--my-property）用于舍入值、间隔或两者； 如果这些函数具有已知值，则使用round()函数是多余的。
函数语法
// property: round(<rounding-strategy>, valueToRound, roundingInterval)
width: round(var(--width), 50px);
width: round(up, 101px, var(--interval));
width: round(down, var(--height), var(--interval));
margin: round(to-zero, -105px, 10px);<rounding-strategy>：舍入策略，默认值（nearest）。可用值up、down、nearest（默认值）、to-zero。
valueToRound：被处理的数值。必须是<number>，<dimension>，或者<percentage>中的一个，或者返回这三种值之一的数学表达式。
roundingInterval：舍入间隔/步进值。必须是<number>，<dimension>，或者<percentage>中的一个，或者返回这三种值之一的数学表达式。
返回值：被处理的数值通过比较，最接近于（取决于舍入策略）舍入间隔若干倍的数。
用法和最佳实践
- 若舍入间隔是0，则返回NaN；
- 若被处理的数值和舍入间隔都是无限值，则返回NaN；
- 若被处理的数值是无限值，舍入间隔是有限值，则返回无限值；
- 若被处理的数值是有限值，舍入间隔是无限值，那么返回值取决于舍入策略和数值的正负性；
- 被处理的数值和舍入间隔需要用相同单位，返回相同单位的值；单位不同会导致函数失效；
示例代码
<!doctype html>
<html>
<head>
<title>取整函数round()示例</title>
<style>
div.box {
width: 100px;
height: 100px;
background: lightblue;
padding: 5px;
--rounding-interval: 25px; // 定义了一个变量，舍入步进值
}
div.box-2 {
height: round(up, 101px, var(--rounding-interval)); // 向上取整
}
div.box-3 {
height: round(down, 122px, var(--rounding-interval)); // 向下取整
}
div.box-4 {
height: round(to-zero, 120px, var(--rounding-interval)); // 向零取整
}
div.box-5 {
height: round(117px, 25px); // 最接近的
}
</style>
</head>
<body>
<div class="box box-1">height: 100px</div>
<div class="box box-2">up 101px (125px)</div>
<div class="box box-3">down 122px (100px)</div>
<div class="box box-4">to-zero 120px (100px)</div>
<div class="box box-5">nearest 117px (125px)</div>
</body>
</html>从示例代码不难看出，其实取整函数就是用被处理的数值跟舍入间隔的n倍进行比较，再看是怎么个取整方向，从而得出结果。理解起来并不算太难。
好了，取整函数round()就介绍到这儿了，赶紧动手试试吧！
更多精通CSS的相关精彩文章制作中，敬请期待。欢迎点赞、收藏和转发！
系列文章：