round() CSS-Funktion

Syntax

width: round(var(--width), 50px);
width: round(up, 101px, var(--interval));
width: round(down, var(--height), var(--interval));
margin: round(to-zero, -105px, 10px);

Parameter

Die round(<rounding-strategy>, valueToRound, roundingInterval) Funktion spezifiziert eine optionale Rundungsstrategie, einen zu rundenden Wert (oder mathematischen Ausdruck) und ein Rundungsintervall (oder mathematischen Ausdruck). Der valueToRound wird gemäß der Rundungsstrategie auf das nächstliegende ganzzahlige Vielfache von roundingInterval gerundet.

<rounding-strategy>

Die Rundungsstrategie. Dies kann einer der folgenden Werte sein:

up

Rundet valueToRound auf das nächstliegende ganzzahlige Vielfache von roundingInterval auf (wenn der Wert negativ ist, wird er "positiver"). Dies entspricht der JavaScript-Methode Math.ceil().

down

Rundet valueToRound auf das nächstliegende ganzzahlige Vielfache von roundingInterval ab (wenn der Wert negativ ist, wird er "negativer"). Dies entspricht der JavaScript-Methode Math.floor().

nearest (Standard)

Rundet valueToRound auf das nähere ganzzahlige Vielfache von roundingInterval, das entweder oberhalb oder unterhalb des Wertes liegen kann. Wenn valueToRound genau zwischen den Rundungszielen ober- und unterhalb liegt (kein Ziel ist "näher"), wird es aufgerundet. Entspricht der JavaScript-Methode Math.round().

to-zero

Rundet valueToRound auf das näher an null liegende ganzzahlige Vielfache von roundingInterval (eine positive Zahl nimmt ab, während ein negativer Wert "weniger negativ" wird). Dies entspricht der JavaScript-Methode Math.trunc().

valueToRound

Der zu rundende Wert. Dies muss ein <number>, <dimension>, oder <percentage> sein, oder ein mathematischer Ausdruck, der zu einem dieser Werte aufgelöst wird.

roundingInterval

Das Rundungsintervall. Dies ist ein <number>, <dimension>, oder <percentage>, oder ein mathematischer Ausdruck, der zu einem dieser Werte aufgelöst wird. Wenn valueToRound ein <number> ist, kann roundingInterval weggelassen werden und standardmäßig auf 1 gesetzt werden. Andernfalls führt das Weglassen zu einem ungültigen Ausdruck.

Rückgabewert

Der Wert von valueToRound, gerundet auf das nächstliegende niedrigere oder höhere ganzzahlige Vielfache von roundingInterval, abhängig von der rounding strategy.

• Wenn roundingInterval 0 ist, ist das Ergebnis NaN.

• Wenn valueToRound und roundingInterval beide unendlich sind, ist das Ergebnis NaN.

• Wenn valueToRound unendlich ist, aber roundingInterval endlich, ist das Ergebnis dasselbe Unendlichkeit.

• Wenn valueToRound endlich ist, aber roundingInterval unendlich, hängt das Ergebnis von der Rundungsstrategie und dem Vorzeichen von A ab:

  • up - Wenn valueToRound positiv (nicht null) ist, wird +∞ zurückgegeben. Wenn valueToRound 0⁺ ist, wird 0⁺ zurückgegeben. Andernfalls 0⁻.
  • down - Wenn valueToRound negativ (nicht null) ist, wird −∞ zurückgegeben. Wenn valueToRound 0⁻ ist, wird 0⁻ zurückgegeben. Andernfalls 0⁺.
  • nearest, to-zero - Wenn valueToRound positiv oder 0⁺ ist, wird 0⁺ zurückgegeben. Andernfalls 0⁻.

• Die Argumentberechnungen können zu <number>, <dimension>, oder <percentage> aufgelöst werden, müssen jedoch denselben Typ haben, andernfalls ist die Funktion ungültig; das Ergebnis hat denselben Typ wie die Argumente.

• Wenn valueToRound genau einem ganzzahligen Vielfachen von roundingInterval entspricht, löst sich round() genau zu valueToRound auf (wobei beibehalten wird, ob valueToRound 0⁻ oder 0⁺ ist, falls relevant). Andernfalls gibt es zwei ganzzahlige Vielfache von roundingInterval, die potenziell "am nächsten" zu valueToRound sind, das niedrigere roundingInterval, das näher zu −∞ ist, und das höhere roundingInterval, das näher zu +∞ ist.

Formale Syntax

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

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

<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        

Beispiele

Positive Werte runden

Dieses Beispiel demonstriert, wie die Rundungsstrategien der round()-Funktion für positive Werte funktionieren.

Von den fünf nachstehenden Boxen wird die round()-Funktion verwendet, um die Höhe der letzten vier festzulegen. Der zu rundende Wert liegt in jedem Fall zwischen 100 px und 125 px, und der Rundungswert beträgt in allen Fällen 25px. Die Höhe der Boxen wird daher entweder auf 125 px aufgerundet oder auf 100 px abgerundet.

HTML

Das HTML definiert 5 div-Elemente, die durch das CSS als Boxen dargestellt werden. Die Elemente enthalten Text, der die Rundungsstrategie, den Anfangswert und die erwartete endgültige Höhe der Box (in Klammern) angibt.

<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

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

Das CSS, das auf alle Boxen angewendet wird, ist unten dargestellt. Beachten Sie, dass wir eine benutzerdefinierte CSS-Eigenschaft namens --rounding-interval anwenden, die wir für das Rundungsintervall verwenden werden.

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

Das erste div von links wird nicht mit spezifischen CSS-Regeln angesprochen und hat daher eine Standardhöhe von 100px. Das CSS für das zweite, dritte und vierte div wird unten dargestellt, die jeweils nach oben, unten und auf null abrunden.

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

Beachten Sie, wie wir oben das Rundungsintervall mit var() und der benutzerdefinierten CSS-Eigenschaft --rounding-interval angeben.

Die letzte Box wird ohne Angabe einer Rundungsstrategie festgelegt und daher standardmäßig auf nearest gesetzt. In diesem Fall liegt das nächstliegende Intervall zu 117 px bei 125px, daher wird es aufgerundet. Nur zum Kontrast haben wir hier fest codierte Werte sowohl für den Rundungswert als auch das Intervall angegeben. Obwohl dies erlaubt ist, würden Sie dies normalerweise nicht tun, weil es keinen Sinn macht, eine Zahl zu runden, wenn Sie bereits wissen, was das Ergebnis sein muss.

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

Ergebnis

Wenn der Browser die CSS-round()-Funktion unterstützt, sollten Sie fünf Spalten mit Höhen sehen, die wie durch ihren enthaltenen Text angegeben, gerundet sind.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• mod()
• rem()