边框变量必须与主题色变量分离，使用--border-前缀独立命名：--border-width（如1px）、--border-color（中性灰如#d0d0d0）、--border-radius（如--radius-md），避免语义混淆和误覆盖。
边框变量怎么命名才不会和主题色混用
边框值（颜色、宽度、圆角）必须和主题色变量分开管理，否则切换主题时容易误改或漏改。比如 --primary-color 是主题色，--border-color 才是边框色——两者语义不同，不能共用同一个变量名，也不能在 :root 里只定义一套再靠类覆盖。
推荐做法是：为边框单独建一组带 border- 前缀的变量，且默认值不依赖主题色：
-
--border-width：统一设为1px，避免在暗色/高对比主题里突然变成2px -
--border-color：初始值用中性灰（如#d0d0d0），而不是var(--text-color)或var(--primary-color) -
--border-radius：按设计系统分级（--radius-sm/--radius-md），不写死像素值
外边距（margin）变量为什么不能直接套用 padding 的那一套
margin 和 padding 虽然都控制间距，但行为完全不同：margin 会折叠，padding 不会；margin 影响布局流，padding 只影响内部空间。如果把 --space-md 同时用于 padding 和 margin，在垂直方向可能触发意外的 margin collapsing，导致视觉节奏错乱。
更稳妥的方式是拆开定义：
- 保留
--space-xs到--space-xl作为基础步长，供padding和margin都能引用 - 但对需要规避折叠的场景（如卡片列表的
margin-bottom），显式用calc(var(--space-md) + 1px)破坏折叠条件 - 不要在
:root[data-theme="dark"]里重写--space-md，它应保持跨主题一致；变的是--border-color或--bg-color这类感知型变量
暗色模式下边框太“糊”怎么办
常见现象：浅色主题下 1px solid #d0d0d0 清晰，切到暗色后 1px solid #333 在深背景上几乎看不见，用户反馈“边框消失了”。这不是变量没生效，而是对比度不足。
解决关键不是加粗边框，而是提升边框与背景的相对对比度：
- 在
:root[data-theme="dark"]中，把--border-color改为#444或rgba(255,255,255,0.12)，而非直接用var(--text-color) - 对需要强调边界的组件（如输入框、卡片），单独加
box-shadow: inset 0 0 0 1px var(--border-color)作为视觉补偿 - 避免在暗色主题中使用
border-style: dashed，虚线在低对比下极易丢失
如何让 border-radius 在不同主题间保持视觉一致性
圆角大小本身不该随主题变化，但它的“视觉重量”会变。比如 8px 在浅色主题里柔和，在高对比主题里可能显得生硬。真正要调的是圆角与边框、阴影的协同关系。
建议策略：
-
--border-radius值保持不变（如始终为6px），但通过--border-width和box-shadow调整“软硬感” - 暗色主题中可配合
box-shadow: 0 1px 3px rgba(0,0,0,0.2)强化轮廓，弥补边框对比度下降 - 高对比主题（如 Windows High Contrast Mode）下，强制重置为
0圆角：@media (forced-colors: active) { :root { --border-radius: 0; } }
最常被忽略的一点：CSS 变量本身不触发重绘，但 border-radius 改变后，如果父容器用了 overflow: hidden，旧的裁剪缓存可能残留——切主题后手动触发一次 element.offsetHeight 读取可强制刷新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
