声明全局 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>
运行效果：
