pow() CSS-Funktion
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Dezember 2023 browserübergreifend verfügbar.
Die pow() CSS Funktion ist eine exponentielle Funktion, die den Wert einer Basis zurückgibt, der auf die Potenz einer Zahl erhoben 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 Kommas getrennte Werte als Parameter.
Rückgabewert
Gibt eine <number> zurück, die basenumber darstellt, das heißt, base wird auf die Potenz von number erhoben.
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 im festen Verhältnis skalieren
Die pow()-Funktion kann nützlich sein für Strategien wie CSS Modular Scale, bei der alle Schriftgrößen auf einer Seite in einem festen Verhältnis zueinander stehen.
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 |