CSS变量即CSS自定义属性，是同一概念；--xxx用于声明，var()用于读取；它属于标准CSS属性，具继承性与级联性，但无渲染语义；区分大小写且作用域受限；回退值在未定义或无效时生效；计算阶段展开，支持动态响应。
CSS变量和CSS自定义属性指的完全是同一个东西——W3C规范里只定义了“CSS自定义属性”（CSS Custom Properties），CSS变量只是开发者社区中广泛使用的俗称。
为什么会有两个名字？
规范文档、MDN、浏览器实现层全部使用CSS自定义属性这个正式名称；而CSS变量这个叫法源于它在开发中的行为类比（类似编程语言里的变量），便于理解。但要注意：var()不是声明变量的语法，--xxx才是——var()只是读取值的函数。
常见混淆点：--开头的属性到底算不算“属性”？
是的，它就是标准的CSS属性，只是名字必须以--开头，且不参与渲染。浏览器把它和color、margin一样解析、继承、级联，只是没有预设语义。比如：
:root { --accent: #007bff; }
button { background-color: var(--accent); }
这段代码里--accent被当作一个合法属性写入样式规则，background-color则通过var(--accent)动态取值。两者缺一不可。
区分大小写和作用域容易踩坑
-
--Color和--color是两个完全不同的自定义属性，不能混用 - 没写在
:root里，就不是全局可用——比如写在.card选择器里，子元素能继承，但兄弟元素或外部元素访问不到 -
var(--missing, red)里的red仅在--missing未定义或无效时生效；如果--missing被定义为invalid-value（如--missing: 12px 12px;用于color），也会触发回退
var()展开，这意味着它能响应媒体查询、伪类切换、JavaScript动态修改——但也意味着无法在@media外直接做逻辑判断，也不能被calc()以外的函数提前处理。 
