能，但必须带单位；--border-width需定义为2px等带单位值，作用域由声明位置决定，:root下全局可用，伪元素需显式重设，transition不支持变量本身而需作用于展开后的原生属性。
border-width 能不能直接用 CSS 变量？
能，但必须带单位。写成 --border-width: 2 是无效的，浏览器会丢弃整个声明；正确写法是 --border-width: 2px 或 --border-width: 0.1rem。
变量定义位置决定作用域：想让所有组件都能读取，就定义在 :root；如果只在某个卡片内生效，可写在 .card 选择器里，但要注意父容器没覆盖同名变量，否则子元素读不到。
- 别在伪元素里漏声明——
::before不继承父级变量，需显式重设--border-width - 若组件用了
all: unset或border: none，会清掉变量效果，得再写一遍border-width: var(--border-width) - 想控制单边，直接用
border-top-width: var(--border-top)，比塞进一个变量更清晰
为什么 transition: --border-width 没反应？
CSS 过渡机制不识别自定义变量，transition: --border-width 0.3s 完全无效。真正能过渡的是变量展开后生成的原生属性。
必须写成：border: var(--border-width) solid var(--border-color); transition: border-width 0.3s, border-color 0.3s;
- 别用
transition: all——它会尝试过渡border-style等不可动画属性，拖慢渲染 - 如果边框初始值是
0，动画可能卡顿或跳变；建议设个最小值如--border-width: 1px作 fallback -
hsl()或rgba()颜色比十六进制过渡更平滑，尤其在 Safari 上
媒体查询覆盖变量为啥失效？
常见错误是把媒体查询写在组件 class 里，比如 .card@media (max-width: 768px) { --border-width: 1px; } ——这完全不生效。CSS 变量作用域只看声明位置，不随选择器嵌套传递。
正确写法必须在 :root 下：
:root { --border-width: 2px; }
@media (max-width: 768px) {
:root { --border-width: 1px; }
}
- JS 动态改变量时，也要确保目标是
document.documentElement.style，而不是某个局部元素 - 移动端横竖屏切换、系统字体放大都会触发
resize，但 JS 很难精准判断当前断点，媒体查询才是可靠方案 - 如果 JS 和媒体查询同时操作同一变量，优先级由 specificity 决定，容易冲突；推荐统一用 class 控制状态，媒体查询只负责默认值
calc() 里混用变量和像素为什么没效果？
border-width: calc(var(--border-width) + 1px) 看似合理，但只要 --border-width 未定义或单位缺失，整条声明就会被浏览器静默丢弃，你什么也看不到。
安全写法是加 fallback 单位：border-width: calc(var(--border-width, 2px) + 1px)；旧版 Safari 还可能需要兜底：border-width: calc(var(--border-width, 2px) * 1px)。
-
border简写不支持calc()，必须拆成border-width、border-style、border-color三部分 - 动态边框撑大布局？记得全局加
* { box-sizing: border-box; }，否则width: 100%会包含边框，导致溢出 - 剧烈变化（如从
0突变到calc(2vw)）可能触发重排，高频场景才考虑will-change: border-width，慎用
变量本身不驱动重绘，真正起作用的是它展开后生成的 border-width 值；而这个值是否被浏览器当作“可动画属性”处理，取决于你有没有在 transition 中明确列出它——这点最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
