CSS var() 函數

CSS 函數 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); }

嘗試一下 ?

CSS 函數 CSS 函數