round()
Baseline
2024
Newly available
Since May 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die round()
CSS Funktion gibt eine gerundete Zahl basierend auf einer ausgewählten Rundungsstrategie zurück.
Autoren sollten eine benutzerdefinierte CSS-Eigenschaft (z.B. --my-property
) für den Rundungswert, das Intervall oder beides verwenden; der Einsatz der round()
Funktion ist überflüssig, wenn diese Werte bekannt sind.
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 einen mathematischen Ausdruck) und ein Rundungsintervall (oder einen mathematischen Ausdruck).
Der valueToRound
wird gemäß der Rundungsstrategie auf das nächste ganzzahlige Vielfache von roundingInterval
gerundet.
<rounding-strategy>
-
Die Rundungsstrategie. Dies kann einer der folgenden Werte sein:
up
-
Rundet
valueToRound
auf das nächsthöhere ganzzahlige Vielfache vonroundingInterval
(wenn der Wert negativ ist, wird er "positiver"). Dies entspricht der JavaScript-MethodeMath.ceil()
. down
-
Rundet
valueToRound
auf das nächstniedrigere ganzzahlige Vielfache vonroundingInterval
(wenn der Wert negativ ist, wird er "negativer"). Dies entspricht der JavaScript-MethodeMath.floor()
. nearest
(Standard)-
Rundet
valueToRound
auf das nächstgelegene ganzzahlige Vielfache vonroundingInterval
, das entweder über oder unter dem Wert liegen kann. WennvalueToRound
genau zwischen den Rundungszielen oben und unten liegt (keines ist "nächstgelegen"), wird aufgerundet. Entspricht JavaScriptMath.round()
. to-zero
-
Rundet
valueToRound
auf das nächstgelegene ganzzahlige Vielfache vonroundingInterval
, das näher zu/gegenüber null ist (eine positive Zahl wird verringert, während ein negativer Wert "weniger negativ" wird). Dies entspricht der JavaScript-MethodeMath.trunc()
.
valueToRound
-
Der zu rundende Wert. Dies muss eine
<number>
,<dimension>
, oder<percentage>
sein oder ein mathematischer Ausdruck, der sich in einen dieser Werte auflöst. roundingInterval
-
Das Rundungsintervall. Dies ist eine
<number>
,<dimension>
, oder<percentage>
, oder ein mathematischer Ausdruck, der sich in einen dieser Werte auflöst. IstvalueToRound
eine<number>
, kannroundingInterval
weggelassen werden und hat standardmäßig den Wert1
. Andernfalls führt das Auslassen zu einem ungültigen Ausdruck.
Rückgabewert
Der Wert von valueToRound
, gerundet auf das nächstniedrigere oder -höhere ganzzahlige Vielfache von roundingInterval
, abhängig von der rounding strategy
.
-
Wenn
roundingInterval
0 ist, ist das ErgebnisNaN
. -
Wenn
valueToRound
undroundingInterval
beide unendlich sind, ist das ErgebnisNaN
. -
Wenn
valueToRound
unendlich ist,roundingInterval
aber endlich, dann ist das Ergebnis dasselbe Unendlichkeit. -
Wenn
valueToRound
endlich ist,roundingInterval
jedoch unendlich, dann hängt das Ergebnis von der Rundungsstrategie und dem Vorzeichen vonA
ab:up
- WennvalueToRound
positiv (nicht null) ist, geben Sie+∞
zurück. WennvalueToRound
0⁺
ist, geben Sie0⁺
zurück. Andernfalls geben Sie0⁻
zurück.down
- WennvalueToRound
negativ (nicht null) ist, geben Sie−∞
zurück. WennvalueToRound
0⁻
ist, geben Sie0⁻
zurück. Andernfalls geben Sie0⁺
zurück.nearest
,to-zero
- WennvalueToRound
positiv oder0⁺
ist, geben Sie0⁺
zurück. Andernfalls geben Sie0⁻
zurück.
-
Die Argumentberechnungen können sich auf
<number>
,<dimension>
, oder<percentage>
auflösen, müssen jedoch denselben Typ haben, sonst ist die Funktion ungültig; das Ergebnis wird denselben Typ wie die Argumente haben. -
Wenn
valueToRound
genau einem ganzzahligen Vielfachen vonroundingInterval
entspricht, löst sichround()
genau invalueToRound
auf (es wird beibehalten, obvalueToRound
0⁻
oder0⁺
ist, falls relevant). Andernfalls gibt es zwei ganzzahlige Vielfache vonroundingInterval
, die potenziell "nächst" zuvalueToRound
sind, ein niedrigeresroundingInterval
, das näher an−∞
ist, und ein höheresroundingInterval
, das näher an+∞
ist.
Formale Syntax
<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
Beispiele
>Positive Werte runden
Dieses Beispiel zeigt, wie die Rundungsstrategien der round()
Funktion für positive Werte funktionieren.
Von den fünf Boxen unten 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 25 px.
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 gerendert 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
Das CSS, das auf alle Boxen angewendet wird, wird unten gezeigt.
Beachten Sie, dass wir eine benutzerdefinierte CSS-Eigenschaft mit dem Namen --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 behandelt, sodass es eine Standardhöhe von 100px haben wird.
Das CSS für das zweite, dritte und vierte div
wird unten gezeigt, das auf, ab und gegen null rundet.
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 gesetzt und wechselt daher standardmäßig zu nearest
.
In diesem Fall ist das nächstgelegene Intervall zu 117 px 125px, sodass es aufgerundet wird.
Nur zum Vergleich haben wir hier fest kodierte Werte sowohl für den Rundungswert als auch für das Intervall angegeben.
Während dies erlaubt ist, würden Sie dies normalerweise nicht tun, da es keinen Sinn hat, 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 entsprechend dem in ihrem enthaltenen Text angegebenen Format gerundet sind.
Spezifikationen
Specification |
---|
CSS Values and Units Module Level 4> # funcdef-round> |
Browser-Kompatibilität
Loading…