hsl(from calc(h + 180) s l) 是获取补色的唯一可靠方案，因 color-mix() 不支持精确±180°偏移、不可变量响应且结果不可控；补色需结合背景明暗动态调整亮度与饱和度以确保可读性。
直接用 hsl(from <color> calc(h + 180) s l)</color> 就能拿到补色，但边框颜色不能只靠它——补色本身不保证可读性，必须结合背景明暗做条件判断。
为什么不能直接用 color-mix() 生成补色？
很多人看到“混合”就直奔 color-mix(in hsl longer hue, red 50%, blue 50%)，但它根本不适合补色场景：
• longer hue 模式会绕远路选弧（比如主色 h: 10° 可能产出 190° 或 -170°），结果不可控；
• 它不支持变量或 currentColor，没法动态响应背景色变化；
• 补色本质是固定 ±180° 色相偏移，不是“混合”，用错语法会导致颜色跳变或失效。
hsl(from <color> calc(h + 180) s l)</color> 是唯一可靠方案
现代浏览器（Chrome 111+、Safari 16.4+、Firefox 115+）已原生支持该语法，它能自动从任意背景色中提取 HSL 分量并运算：
• h 是无单位数值，可直接参与 calc()，如 calc(h + 180)，超出 360 会自动取模；
• 支持所有输入格式：十六进制、rgb()、命名色、CSS 变量（如 var(--bg)）；
• 示例：
:root { --bg: #3a86ff; }<br>.card { background-color: var(--bg); border-color: hsl(from var(--bg) calc(h + 180) s l); }
此时边框色就是蓝色的补色——橙红色，且主色一改，边框自动更新。
补色 ≠ 可用边框色，必须叠加明暗判断
单纯补色可能太浅或太艳，导致边框在背景上“消失”或刺眼。真正可用的边框需要满足对比度要求：
• 浅背景（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)) 提亮、弱化饱和；
• 必须先定义 border-style（如 solid），否则 border-color 不生效；
• 边框宽度建议 ≥ 1px，太细时补色差异肉眼难辨。
真正麻烦的不是算补色，而是补色之后要不要调亮、调暗、压饱和——这些参数得根据实际背景色的 L 值动态缩放，而 CSS 还没原生亮度函数，只能靠经验预设几档阈值或交由 JS 补充。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
