CSS无法直接根据文本内容设置边框颜色，必须通过JS动态写入CSS变量或预设class映射；推荐用dataset标记+Map查表+setProperty更新，CSS中用var(--border-color, #ccc)回退。
边框颜色怎么绑定到文本内容上？CSS本身做不到
CSS 没有原生机制能读取元素的 textContent 或属性值并据此计算颜色。所谓“随内容变化”，实际必须靠外部控制：要么 JS 动态写入 CSS 变量，要么用预设的 class 映射规则（如 status-draft → 灰色边框）。直接在 CSS 里写 border-color: calc(...) 或伪类匹配文字是无效的。
用 CSS 变量 + JS 实现动态边框色的最小闭环
核心思路：JS 识别内容关键词 → 计算对应色值 → 写入自定义属性 → CSS 用 var(--border-color) 响应。关键在避免重复计算和 DOM 频繁重排。
- JS 中优先用
dataset或class标记语义，而非遍历 textContent（性能差、易误判空格/换行） - 颜色映射表建议用 Map 或 Object 静态定义，避免每次调用都
switch或正则匹配 - 批量更新时用
Element.style.setProperty()，别改style.cssText（会覆盖其他内联样式） - CSS 中必须声明 fallback 值：
border-color: #ccc; border-color: var(--border-color, #ccc);
// 示例：根据 status 属性设边框色
element.style.setProperty('--border-color', statusColorMap.get(element.dataset.status) || '#999');
纯 CSS 方案只适用于有限枚举场景
如果内容可穷举（如状态标签：draft / pending / done），用 class 驱动最稳定。此时 CSS 变量只是“语法糖”，本质仍是手动维护映射关系。
- 每个状态写一个 class，例如
.status-draft，里面定义--border-color: #666 - HTML 直接写
- 注意：不要用
[data-status="draft"]属性选择器替代 class——部分旧版 Safari 对属性选择器中 CSS 变量的支持不一致 - 若需支持深色模式，可在
@media (prefers-color-scheme: dark)里重置--border-color值
容易被忽略的兼容性与渲染细节
Chrome 100+ 和 Firefox 95+ 对 CSS 变量的继承和动画支持已较完善，但仍有两个硬伤：
-
border-color不支持 CSS transition（即使变量变了，边框色也不会渐变），要动画得用outline或box-shadow替代 - 服务端渲染（SSR）页面首次加载时，JS 还未执行，
var(--border-color)会退回到 fallback 色，需在 HTML 中预设初始 class 或内联 style 补救 - 当多个组件共用同一变量名（如都用
--border-color），作用域冲突风险高，推荐加前缀：--status-border-color
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
