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 函数 log() 为指数型函数，返回某数的对数。

对数为指数的逆运算。固定底数的此数次方将产生传入的第一个参数。

在 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]?) 函数接受以逗号分隔的两值作为其参数。

value

解析为大于等于 0 的 <number> 的计算式，表示真数。

base

可选。为解析为大于等于 0 的 <number> 的计算式，表示对数的底数。若未定义，则使用默认的对数底数 e。

返回值

在定义了 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 */
}

再将这些尺寸应用于这些选择器的 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

浏览器兼容性

BCD tables only load in the browser

参见