exp()
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 exp() CSS function là hàm số mũ nhận một số làm đối số và trả về hằng số toán học e được nâng lên lũy thừa của số đã cho.
Hằng số toán học e là cơ số của logarit tự nhiên, xấp xỉ bằng 2.718281828459045.
Hàm exp(number) chứa một phép tính trả về giá trị tương đương với pow(e, number).
Cú pháp
/* A <number> value */
width: calc(100px * exp(-1)); /* 100px * 0.367879441171442 = 36.8px */
width: calc(100px * exp(0)); /* 100px * 1 = 100px */
width: calc(100px * exp(1)); /* 100px * 2.718281828459045 = 271.8px */
Tham số
Hàm exp(number) chỉ chấp nhận một giá trị làm tham số.
Giá trị trả về
Trả về một <number> không âm đại diện cho enumber, là kết quả của việc tính e nâng lên lũy thừa của number.
- Nếu
numberlà-Infinity, kết quả là0. - Nếu
numberlà0, kết quả là1. - Nếu
numberlà1, kết quả làe(tức là2.718281828459045). - Nếu
numberlàInfinity, kết quả làInfinity.
Cú pháp chính thức
<exp()> =
exp( <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ụ
Xoay các phần tử
Hàm exp() có thể được dùng để xoay các phần tử vì nó trả về <number>.
HTML
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>
<div class="box box-5"></div>
CSS
div.box {
width: 100px;
height: 100px;
background: linear-gradient(orange, red);
}
div.box-1 {
transform: rotate(calc(1turn * exp(-1))); /* 0.3678794411714423turn */
}
div.box-2 {
transform: rotate(calc(1turn * exp(-0.75))); /* 0.4723665527410147turn */
}
div.box-3 {
transform: rotate(calc(1turn * exp(-0.5))); /* 0.6065306597126334turn */
}
div.box-4 {
transform: rotate(calc(1turn * exp(-0.25))); /* 0.7788007830714049turn */
}
div.box-5 {
transform: rotate(calc(1turn * exp(0))); /* 1turn */
}
Kết quả
Điều chỉnh kích thước tiêu đề theo tỷ lệ cố định
Hàm exp() 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 kích thước font trên trang với nhau theo tỷ lệ cố định.
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 * exp(1.25)); /* 3.4903429574618414rem */
}
h2 {
font-size: calc(1rem * exp(1)); /* 2.718281828459045rem */
}
h3 {
font-size: calc(1rem * exp(0.75)); /* 2.117000016612675rem */
}
h4 {
font-size: calc(1rem * exp(0.5)); /* 1.6487212707001282rem */
}
h5 {
font-size: calc(1rem * exp(0.25)); /* 1.2840254166877414rem */
}
h6 {
font-size: calc(1rem * exp(0)); /* 1rem */
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Values and Units Module Level 4 # exponent-funcs |