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.

CSS 函数 pow() 为指数型函数,返回底数的某数次方的值。

exp() 函数为 pow() 的特例,其底数为数学常数 e

语法

css
/* <number> 值 */
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 */

参数

pow(base, number) 函数接受两个以逗号分隔的值作为其参数。

base

解析为 <number> 的计算式,表示底数。

number

解析为 <number> 的计算式,表示指数。

返回值

返回表示 basenumber<number>,即 basenumber 次方。

形式语法

<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

示例

以固定比值缩放标题

pow() 函数可用于如 CSS 模块式缩放等策略,即将页面上的所有字体尺寸以固定比值互相联系在一起。

HTML

html
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

CSS

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));
}

结果

规范

Specification
CSS Values and Units Module Level 4
# exponent-funcs

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
pow()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

参见