自定义属性（CSS 变量或者级联变量）是由 CSS 作者定义的，它包含的值可以在整个文档中重复使用。
自定义属性标记设定值（比如：--main-color: black;），由 var() 函数来获取值（比如： color: var(--main-color);）
1. 基本用法
1.1 定义自定义属性
声明一个自定义属性，属性名需要以两个减号（--）开始，属性值则可以是任何有效的 CSS 值。和其他属性一样，自定义属性也是写在规则集之内的，如下：
element {
--main-bg-color: brown;
}
注意，规则集所指定的选择器定义了自定义属性的可见作用域，大小写敏感。
通常的最佳实践是定义在根伪类 :root 下，这样就可以在 HTML 文档的任何地方访问到它：
:root {
--main-bg-color: brown;
}
1.2 使用自定义属性
使用一个局部变量时用 var() 函数包裹以表示一个合法的属性值：
element {
background-color: var(--main-bg-color);
}
2. 自定义属性的继承性
自定义属性会继承。即在父元素上定义的自定义属性，子元素都可以使用该自定义属性。
3. 自定义属性的备用值
用 var() 函数可以定义多个备用值(fallback value)，当给定值未定义时将会用备用值替换。
函数的第一个参数是自定义属性的名称。如果提供了多个参数，则表示备用值。
.two {
color: var(--my-var, red); /* 如果 --my-var 为定义，那么 color 为 red */
}
.three {
background-color: var(
--my-var,
var(--my-background, pink)
); /* 如果 --my-var and --my-background 为定义，那么结果就是 pink */
}
.three {
background-color: var(--my-var, --my-background, pink); /* 无效 */
}
4. 无效的自定义属性值
当浏览器遇到无效的 var() 时，会使用继承值或初始值代替。
<p>This paragraph is initial black.</p>
:root {
--text-color: 16px;
}
p {
color: blue;
}
p {
color: var(--text-color);
}
浏览器将 --text-color 的值替换给了 var(--text-color)，但是 16px 并不是 color 的合法属性值。
代换之后，该属性不会产生任何作用。浏览器会执行如下两个步骤：
检查属性 color 是否为继承属性。是，但是
<p>没有任何父元素定义了 color 属性。转到下一步。将该值设置为它的默认初始值，比如 black。
5. JavaScript 中的值
// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue('--my-var');
// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue('--my-var');
// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty('--my-var', jsVar + 4);
