pow() CSS-Funktion
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 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 |