css的var用法，定义属性，全局使用

混迹在开发队伍里的伪开发2026-01-28 19:15

示例图片

复制代码

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --main-bg-color: #abcdef;
  --main-txt-color: blue;  
  --main-padding: 15px;  
}

#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);  
  padding: var(--main-padding);
}

#div2 {
  padding: 5px;
  color:red;
  background:yellow
}

#div3 {
  border:5px solid #000;
  background-color:#F5F5F5;
  color: #000;
  padding: 20px;
}
#div3 p{
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}
</style>
</head>
<body>

<h1>var() 函数</h1>

<div id="div1">测试文本测试文本测试文本测试文本测试文本测试文本</div>
<br>

<div id="div2">测试文本测试文本测试文本测试文本测试文本测试文本</div>
<br>

<div id="div3">测试文本测试文本测试文本测试文本测试文本测试文本
	<p>测试文本测试文本测试文本测试文本测试文本测试文本</p>
</div>

</body>
</html>

说明：var 可以应用于全局，对应一个项目想要修改主题，替换颜色，变得简洁高效