唯一纯css批量生成边框激活色的方案是hsl(from) + calc()，需先声明border-style、按背景明暗缩放l/s值，并用max/min防越界，现代浏览器已稳定支持。
hsl(from) + calc() 是唯一能批量生成边框激活色的纯 CSS 方案
不能靠 color-mix()，它在 longer hue 模式下不保证 ±180° 偏移，var(--bg) 传进去直接无效；也不能靠手写 HEX 或 JS 注入——真要批量、响应式、零 JS，只有 hsl(from <color> ...)</color> 这一条路。现代浏览器（Chrome 111+、Safari 16.4+、Firefox 115+）已稳定支持，且支持所有输入：十六进制、rgb()、命名色、甚至未计算的 CSS 变量。
:active 里用 hsl(from) 必须显式声明 border-style
border-color 再准也没用，如果 border-style 是 none 或没设，颜色根本不会渲染。常见错误是只写：
button:active { border-color: hsl(from var(--bg) calc(h + 180) s l); }
这行代码静默失效。必须确保边框样式存在：
-
button { border: 2px solid transparent; }（先初始化可渲染的边框） button:active { border-color: hsl(from var(--bg) calc(h + 180) s l); }- 或者更稳妥：直接写
border: 2px solid hsl(...)，覆盖整个简写
补色边框必须缩放 l 和 s 才能保证可读性
直接 calc(h + 180) 得到的补色，在浅背景上太亮、深背景上太暗，对比度崩坏。没有原生 lightness() 函数，只能按经验分档处理：
- 浅背景（预设
l > 0.5）→ 深补色：hsl(from var(--bg) calc(h + 180) calc(s * 0.8) calc(l * 0.4)) - 深背景（预设
l ≤ 0.5）→ 浅补色：hsl(from var(--bg) calc(h + 180) calc(s * 0.6) calc(l * 1.6)) - 语法错一个空格或漏括号，整条声明静默失效，连 fallback 都不触发
- 别忘了
max(0, min(100, ...))包裹l和s，避免越界变透明或不可见
border-color 四值语法和 :active 共存时容易误判生效边
想让按钮点击时“仅下边变补色”，不能只靠 border-color: transparent transparent hsl(...) transparent。因为四值写法依赖已有 border-style，而 border-style 不支持四值。正确做法是：
- 先统一设
border-style: solid;（或至少border-bottom-style: solid） - 再用单边属性：
button:active { border-bottom-color: hsl(from var(--bg) calc(h + 180) s l); } - 若混用简写
border和单边border-bottom-color，后者优先级更高，但容易被父级重置覆盖 - 测试时用
outline: 1px dashed red辅助确认哪条边真被渲染了
真正卡住落地的，从来不是怎么写出补色，而是怎么让补色在任意背景明暗下都足够可读——这个亮度缩放逻辑没法绕，也还没法全自动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
