在CSS中，你可以使用自定义属性（也称为CSS变量）来定义可以在整个文档中重用的值。这些自定义属性以两个破折号（--）开头，并可以在任何CSS声明块中定义。然后，你可以使用var()函数来引用这些变量。
以下是如何在CSS中添加和使用自定义属性的步骤：
定义自定义属性
在CSS的根选择器（:root）或任何其他的CSS选择器内部定义自定义属性。这些属性通常被定义在:root选择器内部，这样它们就可以在整个文档中被访问。
:root { --main-color: #007BFF; --secondary-color: #6c757d; --font-stack: Helvetica, sans-serif; --transition-duration: 0.3s; }
使用自定义属性
使用var()函数来引用自定义属性。如果引用的属性不存在或无效，你可以提供一个回退值（fallback value）。
body { color: var(--main-color); background-color: var(--secondary-color); font-family: var(--font-stack); transition: all var(--transition-duration) ease; } button { color: var(--secondary-color, #ccc); /* 如果--secondary-color不存在或无效，将使用#ccc */ }
在JavaScript中操作自定义属性
你还可以在JavaScript中读取和修改自定义属性。这些属性将作为CSSStyleDeclaration对象上的属性被暴露出来，但它们的名称不包含--前缀。
// 读取自定义属性 const mainColor = getComputedStyle(document.body).getPropertyValue('--main-color'); console.log(mainColor); // 输出 "#007BFF" // 修改自定义属性 document.documentElement.style.setProperty('--main-color', '#ff0000');
注意，当你使用JavaScript修改自定义属性时，这些变化将立即反映到任何使用了这些属性的CSS规则上，因为CSS变量是动态的。
