CSS var() 函數
CSS 函數實例
定義一個名為 "--main-bg-color" 的屬性，然後使用 var() 函數調用該屬性：
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
定義與用法
var() 函數用於插入自定義的屬性值，如果一個屬性值在多處被使用，該方法就很有用。
支持版本：CSS3
流覽器支持
表格中的數字表示支持該函數的第一個流覽器版本號。
| 函數 | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS 語法
var(custom-property-name, value)
| 值 | 描述 |
|---|---|
| custom-property-name | 必需。自定義屬性的名稱，必需以 -- 開頭。 |
| value | 可選。備用值，在屬性不存在的時候使用。 |
更多實例
實例
使用 var() 函數調用多個自定義的值：
: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);
}