pow()
Baseline
2023
Newly 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 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
| Specification |
|---|
| CSS Values and Units Module Level 4 # exponent-funcs |