CSS var()函数
CSS var()函数是CSS3中新增的一种函数，它可以用来设置变量，可以用来替换CSS中的属性值。相比传统的CSS属性值，使用var()函数设置的变量可以更加灵活地控制CSS样式，并且可以在多个地方重复使用，大大提高了CSS样式的可维护性。
使用方法
使用var()函数设置变量的方法非常简单，只需要在CSS中添加如下代码：
:root {
--color: #f00;
}
上面的代码中，我们定义了一个名为“color”的变量，它的值为红色，变量名以“--”开头，变量定义位于CSS的根元素“:root”中。
在使用变量时，只需要在CSS属性值中使用var()函数，如下所示：
body {
color: var(--color);
}
上面的代码中，我们使用了var()函数，将body元素的color属性值设置为定义的变量--color的值，也就是红色。
var()函数还可以指定默认值，如果变量不存在，则使用默认值，如下所示：
body {
color: var(--color, #000);
}
上面的代码中，如果变量--color不存在，则body元素的color属性值设置为默认值#000，也就是黑色。
var()函数还可以用来定义复合属性，如下所示：
.box {
background: linear-gradient(var(--start-color), var(--end-color));
}
上面的代码中，我们使用var()函数定义了一个复合属性，它的值是一个渐变，渐变的起始颜色和结束颜色分别由变量--start-color和--end-color指定。
CSS var()函数可以用来设置变量，可以用来替换CSS中的属性值，使用var()函数可以更加灵活地控制CSS样式，并且可以在多个地方重复使用，大大提高了CSS样式的可维护性。