sqrt()
Baseline 2023Newly available
Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die sqrt()
CSS Funktion ist eine exponentielle Funktion, die die Quadratwurzel einer Zahl zurückgibt.
Die Funktion pow(x, 0.5)
ist gleichbedeutend mit sqrt(x)
.
Syntax
/* A <number> value */
width: calc(100px * sqrt(9)); /* 300px */
width: calc(100px * sqrt(25)); /* 500px */
width: calc(100px * sqrt(100)); /* 1000px */
Parameter
Rückgabewert
Gibt eine <number>
zurück, die die Quadratwurzel von x
ist.
- Wenn
x
+∞
ist, ist das Ergebnis+∞
. - Wenn
x
0⁻
ist, ist das Ergebnis0⁻
. - Wenn
x
kleiner als0
ist, ist das ErgebnisNaN
.
Formale Syntax
Beispiele
Größen basierend auf der Quadratwurzel skalieren
Dieses Beispiel zeigt, wie Sie die sqrt()
Funktion verwenden können, um Größen zu berechnen.
HTML
<div class="boxes">
<div class="box">50px</div>
<div class="box one">100px</div>
<div class="box two">150px</div>
<div class="box three">200px</div>
</div>
CSS
Hier verwenden wir CSS-Custom-Properties, um die zu verwendenden Größen zu definieren. Zuerst deklarieren wir die erste Größe (--size-0
), die dann verwendet wird, um die anderen Größen zu berechnen.
--size-1
wird berechnet, indem der Wert von--size-0
(50px) mit der Quadratwurzel von 4 (2) multipliziert wird, was 100px ergibt.--size-2
wird berechnet, indem der Wert von--size-0
(50px) mit der Quadratwurzel von 9 (3) multipliziert wird, was 150px ergibt.--size-3
wird berechnet, indem der Wert von--size-0
(50px) mit der Quadratwurzel von 16 (4) multipliziert wird, was 200px ergibt.
:root {
--size-0: 50px;
--size-1: calc(var(--size-0) * sqrt(4)); /* 100px */
--size-2: calc(var(--size-0) * sqrt(9)); /* 150px */
--size-3: calc(var(--size-0) * sqrt(16)); /* 200px */
}
Die Größen werden dann als width
und height
Werte der Selektoren angewendet.
.one {
width: var(--size-1);
height: var(--size-1);
}
.two {
width: var(--size-2);
height: var(--size-2);
}
.three {
width: var(--size-3);
height: var(--size-3);
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Values and Units Module Level 4 # exponent-funcs |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
sqrt() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support