CSS var() 函數

定義和用法

CSS 的 var() 函數用于插入 CSS 變量的值。

實例

例子 1

首先，聲明一個名為 --main-bg-color 的全局變量，然后在樣式表中使用 var() 函數插入該變量的值：

:root {
  --main-bg-color: coral;
}
#div1 {
  background-color: var(--main-bg-color);
}
#div2 {
  background-color: var(--main-bg-color);
}

親自試一試

例子 2

另一個使用 var() 函數插入多個 CSS 變量值的例子：

:root {
  --main-bg-color: coral;
  --main-txt-color: blue;
  --main-padding: 15px;
}
#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}
#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

親自試一試

CSS 語法

var(--name, value)

技術細節

瀏覽器支持

表格中的數字表示首個完全支持該函數的瀏覽器版本。

相關頁面

教程：CSS 變量