在CSS3中，出现了CSS 颜色变量，可以定义一下颜色变量将赋值，然后使用var() 函数进行调用。这样以后只要修改变量的值，所有的区域的颜色就都改变了。
下面是CSS 颜色变量及var() 函数使用方法。
CSS 颜色变量使用 -- 前缀来定义，然后使用 var() 函数来引用。
下面是如何定义和使用 CSS 颜色变量的例子：
css
:root {
--primary-color: #333;
--accent-color: #5c6ac4;
--background-color: #f0f0f0;
}body {
background-color: var(--background-color);
}
:root {
--primary-color: #333;
--accent-color: #5c6ac4;
--background-color: #f0f0f0;
}body {
background-color: var(--background-color);
}
h1 {
color: var(--primary-color);
}
button {
background-color: var(--accent-color);
color: var(--primary-color);
}
在这个例子中，我们定义了三个颜色变量：--primary-color，--accent-color 和 --background-color。
然后在 body 选择器中将背景颜色设置为 --background-color 变量的值，在 h1 选择器中将文本颜色设置为 --primary-color 变量的值，在 button 选择器中将背景颜色设置为 --accent-color 变量的值，并将文本颜色也设置为 --primary-color 变量的值。
这样，我们就可以在需要的时候方便地更改这些颜色，只需要在 :root 选择器中更改颜色变量的值即可。
本文摘自网络，不代表短经典网立场 https://www.duanjingdian.com/589.html