sqrt()

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

Die sqrt(x) Funktion akzeptiert nur einen Wert als Parameter.

x

Eine Berechnung, die sich als <number> größer oder gleich 0 auflöst.

Rückgabewert

Gibt eine <number> zurück, welche die Quadratwurzel von x ist.

• Wenn x +∞ ist, ist das Ergebnis +∞.
• Wenn x 0− ist, ist das Ergebnis 0−.
• Wenn x kleiner als 0 ist, ist das Ergebnis NaN.

Formale Syntax

<sqrt()> = 
 sqrt( <calc-sum> ) 

<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

Größen basierend auf 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 benutzerdefinierte Eigenschaften, um die zu verwendenden Größen zu definieren. Zuerst deklarieren wir die erste Größe (--size-0), die dann zur Berechnung der anderen Größen verwendet wird.

• --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 */
}

.boxes {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-around;
}
.box {
 width: var(--size-0);
 height: var(--size-0);
 background-color: tomato;
 color: white;
 display: flex;
 align-items: center;
 justify-content: center;
}

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

Browser-Kompatibilität

Siehe auch

• pow()
• hypot()
• log()
• exp()