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.
Hàm pow() trong CSS là một hàm lũy thừa trả về giá trị của một cơ số được nâng lên lũy thừa của một số.
Hàm exp() là trường hợp đặc biệt của pow() trong đó giá trị cơ số là hằng số toán học e.
Cú pháp
css
/* Giá trị <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 */
Tham số
Hàm pow(base, number) chấp nhận hai giá trị phân tách bằng dấu phẩy làm tham số.
Giá trị trả về
Trả về một <number> đại diện cho basenumber, tức là base được nâng lên lũy thừa của number.
Cú pháp chính thức
<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
Ví dụ
Chia tỷ lệ tiêu đề theo tỷ lệ cố định
Hàm pow() có thể hữu ích cho các chiến lược như CSS Modular Scale, liên kết tất cả các cỡ chữ trên trang với nhau theo một tỷ lệ cố định.
HTML
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
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));
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Values and Units Module Level 4 # exponent-funcs |