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
/* <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 */
参数
返回值
返回表示 basenumber 的 <number>
,即 base
的 number
次方。
形式语法
<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 |
浏览器兼容性
BCD tables only load in the browser