兼容情况查看：点击查看
定义变量方法如下，很简单，注意变量名是大小写敏感的
element {
--main-bg-color: brown;
}
声明一个自定义属性，属性名需要以两个减号（--）开始，属性值则可以是任何有效的 CSS 值。和其他属性一样，自定义属性也是写在规则集之内的
注意，规则集所指定的选择器定义了自定义属性的可见作用域。通常的最佳实践是定义在根伪类 :root 下，这样就可以在 HTML 文档的任何地方访问到它了
这个也很好理解，变量只在选择器范围内生效，而且变量的优先级关系也和选择器差不多
在使用变量时方法如下
element {
background-color: var(--main-bg-color);
}
如前所述，使用一个局部变量时用 var() 函数包裹以表示一个合法的属性值
同时变量是可以被js动态修改的
// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");
// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");
// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);
用 var() 函数可以定义多个备用值(fallback value)，当给定值未定义时将会用备用值替换
.two {
color: var(--my-var, red); /* Red if --my-var is not defined */
}
.three {
background-color: var(--my-var, var(--my-background, pink)); /* pink if --my-var and --my-background are not defined */
}
.three {
background-color: var(--my-var, --my-background, pink); /* Invalid: "--my-background, pink" */
}
