CSS round() 函数返回由特定舍入方法确定的舍入数。
作者可以使用自定义 CSS 属性（例如 --my-property）来指定舍入值、间隔， 或两者。如果这些值已知，则使用 round() 函数就变得多余。
可能的值
round(<rounding-strategy>, valueToRound, roundingInterval) 函数采用三个参数。第一个是要舍入的值，第二个是精度数字。
然后，根据指定的舍入策略，将 valueToRound 舍入到最接近的 roundingInterval 整数倍。
<rounding-strategy> - 舍入策略可以具有以下值之一:
up - 将valueToRound向上舍入到roundingInterval的最接近的整数倍。如果该值为负值，则会调整为更正的值。此操作相当于使用 JavaScript 方法Math.ceil()。
down（默认） - 将 valueToRound 向下舍入到 roundingInterval 的最接近的整数倍。如果该值为负值，则将其调整为更负的值。此操作等效于使用 JavaScript 方法 Math.floor()。
nearest - 将valueToRound舍入为roundingInterval最接近的整数倍，该倍数可以高于或低于该值。如果valueToRound恰好位于上方和下方舍入目标之间的中间（两者都不是最接近的），则会进行向上舍入。这类似于使用 JavaScript 方法Math.round()。
to-zero - 将 valueToRound 舍入到最接近零的 roundingInterval 整数倍。此操作类似于使用 JavaScript Math.trunc() 方法。
valueToRound - 要舍入的值必须是 <number>、<dimension> 或 <percentage> 或解析为这些类型之一的数学表达式。
roundingInterval - 舍入间隔可以是 <number>、<dimension> 或 <percentage> 或解析为这些值之一的数学表达式.
返回值
根据所选的舍入策略，valueToRound 的值将舍入为最接近的 roundingInterval 的较低或较高整数倍。
如果 roundingInterval 为 0，则结果将为 NaN（不是数字）。
当valueToRound和roundingInterval均为无穷大时，结果为NaN（非数字）。
如果 valueToRound 为无穷大，但 roundingInterval 为有限，则结果仍为相同的无穷大值。
如果 valueToRound 有限，而 roundingInterval 无限，则结果由舍入策略和 valueToRound 的符号决定:
up - 如果 valueToRound 为正（非零），则结果为 +∞。如果 valueToRound 为 0⁺，则结果为 0⁺。否则，结果为 0⁻。
down - 如果 valueToRound 为负数（非零），则结果为 −∞。如果 valueToRound 为 0⁻，则结果为 0⁻。否则，结果为 0⁺。
最接近的零值 - 如果 valueToRound 为正数或 0⁺，则结果为 0⁺。否则，结果为 0⁻。
参数计算的结果可以是 <number>、<dimension> 或 <percentage>，但它们必须具有相同的类型。
如果不是，则该功能无效；结果值将具有与参数相同的类型。
如果 valueToRound 是 roundingInterval 的整数倍，则 round() 解析为 valueToRound。
否则，如果 valueToRound 落在 roundingInterval 的两个倍数之间，则认为较低的倍数更接近−∞，较高的倍数更接近+∞。
语法
round( <rounding-strategy>? , <calc-sum> , <calc-sum> ) round() 属性仅 Firefox 浏览器支持
CSS round(): 基本示例
下面的示例演示了 round() 函数如何修改元素的尺寸基于不同的舍入策略。
<html>
<head>
<style>
body {
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.box {
width: 200px;
height: 100px;
margin: 20px;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
border: 2px solid black;
background-color: lightblue;
--rounding-interval: 20px;
}
.exact {
width: calc(100px + 40px);
}
.up {
width: round(up, 102px,var(--rounding-interval));
}
.down {
width: round(down, 119px, var(--rounding-interval));
}
.to-zero {
width: round(to-zero, 115px, var(--rounding-interval));
}
.nearest {
width: round(121px, 25px)
}
</style>
</head>
<body>
检查 Firefox 浏览器是否正常工作
<div class="box exact">精确值 140px</div>
<div class="box up">102px 四舍五入为 120px</div>
<div class="box down">119px 向下舍入为 100px</div>
<div class="box to-zero">115px 四舍五入到 0 到 100px</div>
<div class="box returned">121px 四舍五入至最接近的 125px</div>
</body>
</html>