hsl(from calc(h + 180) s l) 是当前唯一可靠生成补色的 css 方案，color-mix() 因 longer hue 不确定性及不支持变量而失效；补色需按背景明暗缩放 l/s 才可读，且 css 尚无原生亮度判断函数。
直接用 hsl(from <color> calc(h + 180) s l)</color> 能拿到补色，但边框是否可用，取决于背景明暗——不加亮度/饱和度调节的补色大概率不可读。
为什么 color-mix() 不适合生成补色
很多人试过 color-mix(in hsl longer hue, var(--bg) 50%, #ff0000 50%)，结果颜色跳变、不响应变量、甚至在深蓝背景上产出浅紫而非橙红。原因很实在：
-
longer hue模式不保证 ±180° 偏移，比如h: 20°可能算出200°或-160°，浏览器自己选弧 - 它不接受
currentColor或未计算的 CSS 变量，var(--bg)传进去直接无效 - 补色是确定性运算，不是“混合”，语法错位导致结果失控
hsl(from ...) 是当前唯一可靠方案
现代浏览器（Chrome 111+、Safari 16.4+、Firefox 115+）已原生支持该语法，它能真正从任意背景色中解构 HSL 并参与 calc：
-
h是纯数字，可直接calc(h + 180)，超 360 自动取模 - 支持所有输入：十六进制、
rgb()、命名色、var(--bg) - 示例：
:root { --bg: #3a86ff; } .card { background-color: var(--bg); border: 2px solid hsl(from var(--bg) calc(h + 180) s l); }此时边框是稳定的橙红色，且--bg一改，边框立刻重算
补色之后必须做明暗适配
补色本身不保对比度。浅背景（L > 0.5）配原补色会太亮，深背景（L ≤ 0.5）配原补色又太暗。必须手动缩放 l 和 s：
- 浅背景 → 深补色：
hsl(from var(--bg) calc(h + 180) calc(s * 0.8) calc(l * 0.4)) - 深背景 → 浅补色：
hsl(from var(--bg) calc(h + 180) calc(s * 0.6) calc(l * 1.6)) - 别忘了先写
border-style: solid，否则border-color不生效 - 边框宽度至少
1px，0.5px下人眼几乎看不出补色差异
真正难的是 L 值判断没有原生函数
CSS 还没提供 lightness() 或 luma() 函数来实时读取背景色的亮度。目前只能靠经验预设阈值（如用 l 粗略分档），或交由 JS 补充计算——这意味着纯 CSS 方案在复杂渐变或图片背景上必然失效。补色只是第一步，后续的亮度缩放逻辑才是实际落地时最常被忽略的坎。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
