var 函数
CSS 变量函数，用于取出 CSS 变量的值。
变量的目的只有一个：复用。CSS 变量是 CSS3 提出的，为 CSS 模块化配置提供了基础。
var 函数的基本用法
var() 函数接收两个参数，第一个参数为 CSS 变量名，第二个参数为默认值，可缺省，当变量未找到或者未赋值时，使用默认值，如var(variableName, default)。
定义变量
-
局部变量
局部变量定义在元素标签的行内式
style中，表示只作用于当前元素标签。<div class="text" style="--font-size:20px">var 函数</div>局部变量定义在当前
selector结构中，表示只用于当前selector结构中。selector { --border-color: blue; border-color: var(--border-color); } -
全局变量
:root { --box-bg-color: skyblue; }全部变量定义
:root结构中，所有元素标签均可复用结构内的 CSS 变量。
注意：CSS 变量的变量名定义必须以
--开头。
使用变量
使用变量需要借助 var() 函数取出 CSS 变量定义的属性值。
selector {
font-size: var(--font-size, 16px);
color: var(--box-bg-color, #000);
}
Demo 案例
案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>css-var</title>
<style type="text/css">
:root {
--box-bg-color: skyblue;
}
.wrapper {
width: 100px;
height: 100px;
margin-bottom: 10px;
background-color: var(--box-bg-color);
border: 1px solid;
border-color: var(--border-color, #000);
}
.container {
--border-color: blue;
width: 100px;
height: 100px;
border: 1px solid;
border-color: var(--border-color);
}
.text {
font-size: var(--font-size, 15px);
}
</style>
</head>
<body>
<div class="wrapper"></div>
<div class="container"></div>
<div class="text" style="--font-size:20px">var 函数</div>
<div class="text">var 函数</div>
</body>
</html>
案例结果
标签：变量,color,碎片,--,var,border,CSS
From： https://www.cnblogs.com/huangminghua/p/17187616.html