log()

基线 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>。表示要取对数的值。

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() 函数通过使用 对数刻度 来可视化数据值。在此示例中，每个条形的宽度相对于其在底数为 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);
}

结果

规范

规范
CSS 值和单位模块 Level 4
# exponent-funcs

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅