CSS 函数 - round（）

CSS函数 round（） 返回一个由特定舍入方法确定的舍入数。

作者可以使用自定义 CSS 属性（例如 --my-property）来指定舍入值和/或间隔。如果这些值已经知道，那么使用 round（）函数就变得多余了。

可能的值

函数 round（<rounding-strategy>， valueToRound， roundingInterval） 采用三个参数。第一个是要舍入的值，第二个是精度数字。

然后，根据指定的，rounding-strategy，将 valueToRound 四舍五入为 roundingInterval 的最接近的整数倍。

<rounding-strategy> - 舍入策略可以具有以下值之一：
- up - 将 valueToRound 向上舍入到 roundingInterval 的最接近的整数倍。如果该值为负数，则将调整为更正的值。此操作等同于使用 JavaScript 方法 Math.ceil（）。
- down（default） - 将 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（Not a Number）。
当 valueToRound 和 roundingInterval 都是无限时，结果为 NaN（不是数字）。
如果 valueToRound 是无限的，但 roundingInterval 是有限的，则结果将保持为相同的无穷大值。
如果 valueToRound 是有限的，但 roundingInterval 是无限的，则结果由舍入策略和 valueToRound 的符号确定：
- up - 如果 valueToRound 为正（不为零），则结果为 +∞。如果 valueToRound 为 0⁺，则结果为 0⁺。否则，结果为 0⁻。
- down - 如果 valueToRound 为负数（不为零），则结果为 −∞。如果 valueToRound 为 0⁻，则结果为 0⁻。否则，结果为 0⁺。
- nearest， to-zero - 如果 valueToRound 为正或 0⁺，则结果为 0⁺。否则，结果为 0⁻。
参数计算可以产生 <number>、<维度> 或 <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>
Check the proper working on Firefox Browser
<div class="box exact">Exact Value 140px</div>
<div class="box up">102px Rounded Up to 120px</div>
<div class="box down">119px Rounded Down to 100px</div>
<div class="box to-zero">115px Rounded to-zero to 100px</div>
<div class="box nearest">121px Rounded to-nearest to 125px</div>
</body>
</html>

打印本页