此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
log()
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 中传入单个参数时,将使用以 e(约 2.7182818)为底数的自然对数,不过底数可用可选的第二个参数设置为任意值。
语法
css
/* <number> 值 */
width: calc(100px * log(7.389)); /* 200px */
width: calc(100px * log(8, 2)); /* 300px */
width: calc(100px * log(625, 5)); /* 400px */
参数
log(value [, base]?) 函数接受以逗号分隔的两值作为其参数。
返回值
在定义了 base 时为 value 的对数值。
在未定义 base 时为 value 的自然对数(以 e 为底数)。
形式语法
<log()> =
log( <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
示例
基于 log() 函数的尺寸
此示例展示了如何使用 log() 函数计算尺寸。
HTML
html
<div class="boxes">
<div class="box zero">50px</div>
<div class="box one">100px</div>
<div class="box two">150px</div>
<div class="box three">200px</div>
</div>
CSS
此处使用 CSS 自定义属性定义待用尺寸。首先声明第一个尺寸(--size-0),再用此尺寸计算其他尺寸。
--size-1所计算的为log(7.389)的值(2)乘--size-0(50px),结果为 100px。--size-2所计算的为log(8, 2)的值(3)乘--size-0(50px),结果为 150px。--size-3所计算的为log(625, 5)的值(4)乘--size-0(50px),结果为 200px。
css
:root {
--size-0: 50px;
--size-1: calc(var(--size-0) * log(7.389)); /* 100px */
--size-2: calc(var(--size-0) * log(8, 2)); /* 150px */
--size-3: calc(var(--size-0) * log(625, 5)); /* 200px */
}
.boxes {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.box {
width: var(--size-0);
height: var(--size-0);
background-color: tomato;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
再将这些尺寸应用于这些选择器的 width 和 height 值。
css
.one {
width: var(--size-1);
height: var(--size-1);
}
.two {
width: var(--size-2);
height: var(--size-2);
}
.three {
width: var(--size-3);
height: var(--size-3);
}
结果
[フレーム]
规范
| Specification |
|---|
| CSS Values and Units Module Level 4 # exponent-funcs |
浏览器兼容性
Enable JavaScript to view this browser compatibility table.