CSS var() 函式
示例
首先,宣告一個名為 "--main-bg-color" 的全域性變數,然後在樣式表中使用 var() 函式插入該變數的值
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
var() 函式用於插入 CSS 變數的值。
版本 | CSS3 |
---|
瀏覽器支援
表中數字表示該函式完全支援的第一個瀏覽器版本。
函式 | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS 語法
var(--名稱, 值)
值 | 描述 |
---|---|
name | 必需。變數名(必須以兩個破折號開頭) |
value | 可選。回退值(如果找不到變數則使用) |
更多示例
示例
另一個使用 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 教程:CSS 變數