CSS 自定义属性（Custom Properties），也称为 CSS 变量，是 CSS 中一种能够保存和复用值的机制。它们与常规的 CSS 属性不同，因为它们可以在整个文档中定义一次，然后在需要的任何地方使用。
定义和语法
定义一个自定义属性使用两个连字符（--）开头，后面跟着属性名，类似于下面的示例：
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
}
在这个例子中，:root 伪类选择器表示文档根元素，通常是 <html> 元素。这里定义了两个自定义属性 --primary-color 和 --secondary-color，分别用于存储主要颜色和次要颜色的值。
使用自定义属性
可以通过 var() 函数在任何 CSS 属性值中引用自定义属性，如下所示：
body {
background-color: var(--primary-color);
color: var(--secondary-color);
}
.button {
background-color: var(--primary-color);
color: white;
border: 2px solid var(--secondary-color);
}
在上面的例子中，var() 函数被用来引用之前定义的 --primary-color 和 --secondary-color 自定义属性。这样，当需要改变主要颜色或次要颜色时，只需要在 :root 伪类中修改定义，所有引用到这些变量的地方都会自动更新。
动态修改自定义属性
通过 JavaScript，可以动态修改自定义属性的值，例如：
document.documentElement.style.setProperty('--primary-color', 'red');
这段 JavaScript 代码会将 --primary-color 自定义属性的值设置为 red，从而影响到所有依赖于 --primary-color 的 CSS 规则。
兼容性和注意事项
- CSS 自定义属性的兼容性良好，支持现代浏览器，包括 Chrome、Firefox、Safari 和 Edge 等。
- 使用自定义属性时，务必考虑到变量的作用域和继承规则，特别是在嵌套样式中的使用情况。
- 自定义属性的值只能通过
var()函数引用，无法直接在属性名中使用，例如background: var(--color)是有效的，但background: --color是无效的。
通过合理使用 CSS 自定义属性，可以显著提升 CSS 的可维护性和灵活性，尤其是在大型项目中管理颜色、间距、字体等重复使用的值。
前端工程师、程序员
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！