log()

Baseline 2023

新推出

自 ⁨2023 年 12 月⁩起，此功能可在最新的设备和浏览器版本上使用。此功能可能无法在较旧的设备或浏览器上使用。

log() CSS 函数是一个指数函数，它返回一个数字的对数。

对数是指数运算的逆运算。它是固定底数需要被提高到的次数，以便产生作为第一个参数传递的数字。

在 CSS 中，当只传递一个参数时，使用自然对数 e，或近似值 2.7182818，尽管底数可以通过可选的第二个参数设置为任何值。

语法

css

/* A <number> value */
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>。表示要取对数的值。
底数: 可选。一个计算结果为大于或等于 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() 函数通过对数刻度来可视化数据值。此示例中每个条形的宽度相对于其在以 10 为底的对数刻度上的数据值。在每个元素上，其值被分配给一个名为 --value 的 CSS 自定义属性，然后由 .bar 类用于计算其宽度。

HTML

html

<div class="bar" style="--value: 50">50</div>
<div class="bar" style="--value: 100">100</div>
<div class="bar" style="--value: 500">500</div>
<div class="bar" style="--value: 10000">10,000</div>
<div class="bar" style="--value: 2000000">2,000,000</div>

CSS

css

.bar {
  width: calc(log(var(--value), 10) * 2em);
}

.bar {
  height: 2em;
  background-color: tomato;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.25em 0;
}

结果

规范

规范
CSS 值和单位模块第 4 级 # 指数函数

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由MDN 贡献者在 2025 年 10 月 10 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题