View in EnglishAlways switch to English

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>  <div>50px</div>  <div>100px</div>  <div>150px</div>  <div>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);}