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, в зависимости от rounding strategy.

• Если roundingInterval равно 0, результат — NaN.

• Если valueToRound и roundingInterval оба infinite, результат — NaN.

• Если valueToRound бесконечно, но roundingInterval конечно, результат — тот же infinity.

• Если valueToRound конечно, но roundingInterval бесконечно, результат зависит от стратегии округления и знака A:

  • up — Если valueToRound положительное (не равно нулю), возвращается +∞. Если valueToRound равно 0⁺, возвращается 0⁺. В противном случае возвращается 0⁻.
  • down — Если valueToRound отрицательное (не равно нулю), возвращается −∞. Если valueToRound равно 0⁻, возвращается 0⁻. В противном случае возвращается 0⁺.
  • nearest, to-zero — Если valueToRound положительное или 0⁺, возвращается 0⁺. В противном случае возвращается 0⁻.

• Вычисления аргументов могут привести к <number>, <dimension> или <percentage>, но должны иметь одинаковый тип, в противном случае функция недействительна; результат будет иметь тот же тип, что и аргументы.

• Если valueToRound точно равно целому кратному roundingInterval, round() разрешается точно как valueToRound (сохраняя, если применимо, является ли valueToRound 0⁻ или 0⁺). В противном случае существует два целых кратных roundingInterval, которые потенциально являются наиболее «близкими» к valueToRound, нижний roundingInterval, который ближе к −∞, и верхний roundingInterval, который ближе к +∞.

<round()> = 
  round( <rounding-strategy>? , <calc-sum> , <calc-sum>? )  

<rounding-strategy> = 
  nearest  |
  up       |
  down     |
  to-zero  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

Этот пример демонстрирует, как стратегии округления функции round() работают для положительных значений.

Из пяти блоков ниже, функция round() используется для установки высоты четырёх последних. Значение, которое нужно округлить, находится между 100 px и 125 px в каждом случае, а значение округления — 25px во всех случаях. Поэтому высота блоков либо округляется до 125 px, либо до 100 px.

HTML

HTML определяет 5 элементов div, которые будут отображаться как блоки с помощью CSS. Элементы содержат текст, указывающий на стратегию округления, начальное значение и ожидаемую конечную высоту блока (в скобках).

<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>

CSS

CSS, применяемый ко всем блокам, показан ниже. Обратите внимание, что мы применяем пользовательское свойство CSS с именем --rounding-interval, которое мы будем использовать для интервала округления.

div.box {
  width: 100px;
  height: 100px;
  background: lightblue;
  padding: 5px;
  --rounding-interval: 25px;
}

Первый блок слева не получает специальных правил CSS, поэтому его высота по умолчанию будет 100px. CSS для div двух, трёх и четырёх блоков показан ниже, которые округляют, соответственно, вверх, вниз и до нуля.

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));
}

Обратите внимание, как выше мы указываем интервал округления с помощью var() и пользовательского свойства CSS --rounding-interval.

Последний блок установлен без указания стратегии округления, и поэтому по умолчанию используется nearest. В этом случае ближайший интервал к 117 px — 125px, поэтому он будет округлен вверх. Просто для сравнения, здесь мы указали жёсткие значения для значения округления и интервала. Хотя это разрешено, обычно этого не делают, потому что нет смысла округлять число, когда вы уже знаете, каким должен быть результат.

div.box-5 {
  height: round(117px, 25px);
}

Результат

Если браузер поддерживает функцию CSS round(), вы должны увидеть пять столбцов с высотами, округленными в соответствии с содержащимся в них текстом.

• mod()
• rem()