声明全局 CSS 变量
:root{
<自定义属性名>: <自定义属性值>;
}
自定义属性名必需以 -- 开头。
:root
:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。
var() 函数
var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。
支持版本：CSS3
css语法：
var(custom-property-name, value)
custom-property-name：必需。自定义属性的名称，必需以 -- 开头。
value：可选。备用值，在属性不存在的时候使用。
使用实例：
css：
:root{
--bg-color: blue;
}
.a{
background: var(--bg-color);
width: 40px;
height: 40px;
}
html：
<div class="a"></div>
运行效果：
除了可以在css自定义属性，也可以通过js动态自定义属性或修改属性值
使用js修改自定义属性值或设置自定义属性
CSSStyleDeclaration.setProperty()
使用CSSStyleDeclaration.setProperty() 方法接口为一个声明了 CSS 样式的对象设置一个新的值。
语法：
style.setProperty(propertyName, value, priority);
propertyName：创建或被更改的 CSS 属性。
value（可选）：属性值。如果没有指定，则当作空字符串。
priority（可选）：设置 "important" CSS 优先级。如果没有指定，则当作空字符串。
使用实例：
css：
.b{
background: var(--bg-color2);
width: 40px;
height: 40px;
}
html：
<div class="b"></div>
<script type="text/javascript">
// 使用 js 自定义属性
window.document.documentElement.style.setProperty("--bg-color2", "red");
</script>
运行效果：
