用 CSS 变量定义边框颜色最灵活：1. 在 :root 中定义 --theme-color；2. 用 var(--theme-color) 应用于 border-color 或 border；3. 结合媒体查询或 class 切换主题色；4. 用 var(--theme-color, #64748b) 提供回退色。
用 CSS 变量（Custom Properties）定义边框颜色，是最灵活、最推荐的方式——主题色一变，所有用到该变量的边框自动同步更新。
1. 在 :root 中定义主题色变量
把主色调（比如品牌蓝）声明为一个 CSS 变量，作用域覆盖全局：
/* 推荐放在 :root 或全局样式表开头 */:root {
--theme-color: #3b82f6; /* Tailwind 默认的 blue-500 */
}
这样后续任何选择器都能通过 var(--theme-color) 调用它。
立即学习“前端免费学习笔记（深入）”；
2. 在需要边框的元素上使用变量
直接把变量用在 border-color 或简写 border 里：
.card {
border: 2px solid var(--theme-color);
}
.btn {
border-bottom: 3px solid var(--theme-color);
}
注意：变量必须用 var() 函数包裹，不能直接写 --theme-color。
3. 支持主题切换（深色/浅色模式）
配合 @media (prefers-color-scheme: dark) 或自定义 class 动态切换变量值：
:root {
--theme-color: #3b82f6;
}
@media (prefers-color-scheme: dark) {
:root {
--theme-color: #60a5fa;
}
}
/* 或用 class 控制（如手动切换主题） */
.theme-dark :root {
--theme-color: #4f46e5;
}
只要变量值更新，所有依赖它的边框颜色立刻响应变化，无需重复写样式。
4. 提供 fallback 颜色（增强健壮性）
防止变量未定义时边框“消失”，可在 var() 中加默认值：
.input {
border: 1px solid var(--theme-color, #64748b); /* 未定义时用 slate-400 */
}
语法是 var(--name, fallback-value)，第二个参数只在变量不存在或无效时生效。
