pow()
Baseline
2023
Neu verfügbar
Seit December 2023 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Die pow() CSS Funktion ist eine Exponentialfunktion, die den Wert einer Basis errechnet, die auf die Potenz einer Zahl angehoben wird.
Die exp() Funktion ist ein Spezialfall von pow(), bei dem der Wert der Basis die mathematische Konstante e ist.
Syntax
/* A <number> value */
width: calc(10px * pow(5, 2)); /* 10px * 25 = 250px */
width: calc(10px * pow(5, 3)); /* 10px * 125 = 1250px */
width: calc(10px * pow(2, 10)); /* 10px * 1024 = 10240px */
Parameter
Die pow(base, number) Funktion akzeptiert zwei durch Komma getrennte Werte als Parameter.
Rückgabewert
Gibt eine <number> zurück, die basenumber darstellt, d.h. base angehoben auf die Potenz von number.
Formale Syntax
<pow()> =
pow( <calc-sum> , <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
Überschriften mit einem festen Verhältnis skalieren
Die pow() Funktion kann nützlich für Strategien wie CSS Modular Scale sein, welche die Schriftgrößen auf einer Seite in einem festen Verhältnis zueinander setzen.
HTML
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
CSS
h1 {
font-size: calc(1rem * pow(1.5, 4));
}
h2 {
font-size: calc(1rem * pow(1.5, 3));
}
h3 {
font-size: calc(1rem * pow(1.5, 2));
}
h4 {
font-size: calc(1rem * pow(1.5, 1));
}
h5 {
font-size: calc(1rem * pow(1.5, 0));
}
h6 {
font-size: calc(1rem * pow(1.5, -1));
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Values and Units Module Level 4 # exponent-funcs |