var()函数可以用作元素的任何属性中的值。 var()函数不能用作属性名称,选择器或除属性值以外的任何东西。(这样做通常会导致语法错误或与变量无关的值)。
定义一个名为 "--main-bg-color" 的属性,然后使用 var() 函数调用该属性:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基础教程(nhooo.com)</title> <style> :root { --main-bg-color: coral; } #div1 { background-color: var(--main-bg-color); padding: 5px; } #div2 { background-color: var(--main-bg-color); padding: 5px; } #div3 { background-color: var(--main-bg-color); padding: 5px; } </style> </head> <body> <h1>var() 函数</h1> <div id="div1">基础教程nhooo.com - 学好基础,才能走的更远!</div> <br> <div id="div2">基础教程nhooo.com - 学好基础,才能走的更远!</div> <br> <div id="div3">基础教程nhooo.com - 学好基础,才能走的更远!</div> </body> </html>测试看看 ‹/›
var() 函数用于插入自定义的属性值,如果一个属性值在多处被使用,该方法就很有用。
支持版本:CSS3
表格中的数字表示支持该函数的第一个浏览器版本号。
函数 | |||||
---|---|---|---|---|---|
var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
var(custom-property-name, value)
值 | 描述 |
---|---|
custom-property-name | 必需。自定义属性的名称,必需以 -- 开头。 |
value | 可选。备用值,在属性不存在的时候使用。 |
使用 var() 函数调用多个自定义的值:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基础教程(nhooo.com)</title> <style> :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); } #div3 { background-color: var(--main-bg-color); color: var(--main-txt-color); padding: var(--main-padding); } </style> </head> <body> <h1>var() 函数</h1> <div id="div1">基础教程nhooo.com - 学好基础,才能走的更远!</div> <br> <div id="div2">基础教程nhooo.com - 学好基础,才能走的更远!</div> <br> <div id="div3">基础教程nhooo.com - 学好基础,才能走的更远!</div> </body> </html>测试看看 ‹/›