CSS变量需在属性中用var()调用才生效，hover修改变量前须确保基础样式已使用该变量；注意大小写敏感、border-width/style稳定性；过渡推荐transition: border-color 0.3s ease（兼容Safari 15.4+），老版本可用transition: all 0.3s ease并固定边框样式；局部覆盖用类名重定义变量，避免内联污染；暗色模式变量应置于@media内body上且位置靠后。
卡片边框颜色用CSS变量定义，但hover不生效？
常见现象是写了 --border-color: #333，hover里改 --border-color: #007bff，结果边框纹丝不动——根本原因是没在元素上真正用到这个变量。CSS变量只是“存起来”，不border-color: var(--border-color)，它永远不参与渲染。
- 必须在基础样式中显式调用
var(--border-color)，hover才可能触发重绘 - 变量名区分大小写，
--BorderColor和--border-color是两个变量 - 如果卡片用了
border: 1px solid，只改颜色变量不够，得确保border-width和border-style也稳定（否则可能因层叠导致hover时边框“跳动”）
如何让hover过渡更自然，而不是突兀变色？
直接写 transition: border-color 0.3s 看似合理，但有兼容性陷阱：Safari 15.4 之前不支持对 border-color 单独做过渡，必须写成 transition: border 0.3s 才能生效；而后者又会把 border-width 和 border-style 也纳入过渡，容易引发意外缩放。
- 稳妥写法是统一用
transition: border-color 0.3s ease，并确认目标浏览器版本 ≥ Safari 15.4 / Chrome 100 - 若需兼容老版本，改用
transition: all 0.3s ease，但务必提前固定border-width和border-style，避免它们被过渡干扰 - 别漏掉
will-change: border-color—— 对高频hover的卡片，加这句能让部分浏览器提前优化渲染路径
多个卡片共享一套主题色，但个别要例外处理？
全局定义 :root { --border-color: #ddd; } 很方便，但某个特殊卡片想用红色边框，又不想破坏变量语义，硬写 style="--border-color: #dc3545" 会覆盖整个作用域，影响子元素。
- 优先用局部作用域：给该卡片加类名
.card--urgent，再写.card--urgent { --border-color: #dc3545; } - 避免在内联
style里覆写 CSS 变量，它会污染继承链；真要用内联，改用border-color: #dc3545直接覆盖 - 如果卡片嵌套深（比如
.card > .content > .header），记得检查变量是否被中间某层重定义过，用浏览器开发者工具的“Computed”面板看最终生效值
暗色模式下边框颜色自动适配，为什么CSS变量没切换？
写了 @media (prefers-color-scheme: dark) { :root { --border-color: #444; } }，但切换系统主题后边框没变——大概率是变量定义位置错了。CSS变量的级联和媒体查询的匹配时机很关键。
-
:root下的媒体查询必须放在所有其他:root声明之后，否则会被后续未包裹的变量声明覆盖 - 更稳的方式是把暗色模式变量写在
@media内部的html或body上，比如@media (prefers-color-scheme: dark) { body { --border-color: #444; } } - 注意：Chrome 的“强制颜色方案”调试开关（DevTools → Rendering → Emulate CSS media feature prefers-color-scheme）不会触发
@media重计算，得真机或系统级切换才有效
变量本身不难，难的是它和继承、层叠、媒体查询、过渡属性之间那些不声不响的相互作用。调不出来的时候，先看 computed style 里变量值对不对，再查它到底被哪一行代码悄悄覆盖了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
