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 上檢視此頁面 • 報告此內容的問題