CSS变量可接受任何合法CSS值，但有效性取决于使用场景：--width:20px可用于width却不可用于color，--invalid:10在font-size中无效；数值需带单位或用calc()组合，字符串拼接仅限content等属性。
CSS变量（即自定义属性）本身不强制限定类型，它能接受任何合法的CSS值 —— 也就是说，--color、--size、--gap、--shadow甚至--gradient都可以，只要赋的值在对应上下文中是语法合法的。
哪些值可以直接用，哪些会出问题？
CSS变量存储的是“原始值”，不是解析后的结果。浏览器只在var()被实际使用时才去检查该值是否适用于目标属性。所以：
-
--width: 20px→ 可用于width、margin等，但不能用于color -
--color: #ff0000→ 可用于color、background，但不能用于font-size -
--invalid: 10→ 单独写10没有单位，用在font-size: var(--invalid)里就是无效声明（会被忽略） -
--string: "hello"→ 只能在content等接受字符串的属性中生效，color: var(--string)会失败
数值 + 单位怎么安全拼接？
不能直接把数字和单位塞进变量再硬连，比如--size: 16; font-size: var(--size)px是无效语法（px不是var()的一部分）。正确做法只有两种：
- 变量本身带单位：
--size: 16px;→font-size: var(--size); - 用
calc()动态组合：--size: 16;→font-size: calc(var(--size) * 1px);（注意* 1px不是乘法，而是让数值获得单位）
别写calc(var(--size) px)或var(--size) + "px" —— CSS不支持字符串拼接运算符。
立即学习“前端免费学习笔记（深入）”；
字符串拼接和复合值怎么处理？
CSS变量支持字符串拼接，但仅限于content属性这类明确接受字符串的场景：
-
--prefix: "【"; --suffix: "】"; content: var(--prefix) "提示" var(--suffix);→ 渲染为【提示】 -
--border: "2px solid red"; border: var(--border);→ 合法，因为border接受完整声明 -
--top: "20"; margin-top: var(--top)px;→ ❌ 无效，px不是var()调用的一部分
复合值如linear-gradient、calc()表达式，可直接存为变量值：--bg: linear-gradient(45deg, #000, #fff);，后续background: var(--bg);即可。
最常被忽略的一点：变量值是否“有效”，取决于它最终被用在哪个CSS属性上。同一个--value在color里可能是无效的，在box-shadow里却完全合法 —— 浏览器不会提前报错，只会在计算样式时静默丢弃非法组合。
