直接用 color-mix() 生成 hover 色可行，但必须显式指定混合色彩空间、颜色及权重（如 var(--primary) 80%, black 20%），否则默认等比混合易导致视觉断裂；推荐 in srgb 兼容性好，in lch 明度更均匀但 safari 不支持；hsl(from ...) 更适合同色系明度微调。
直接用 color-mix() 生成 hover 色是可行的，但必须明确“和谁混、混多少”，否则结果不可控、不一致。
为什么不能写 color-mix(in srgb, var(--primary), black) 就完事？
缺权重会默认各 50%，但实际中你几乎从不需要“一半主色+一半黑”——那通常太暗、失饱和。更常见的是“主色占 80%、黑占 20%”这类偏向原色的混合。浏览器虽会自动归一化 #f00 2, #000 1 这类写法，但显式写清比例（如 var(--primary) 80%, black 20%）才能让团队协作和后期维护有据可依。
- 不写权重 → 浏览器按等比混合，浅色变灰、深色发黑，视觉反馈断裂
- 权重加起来不必等于 100% →
var(--primary) 6, black 1等价于约 85.7% : 14.3%，但可读性差，不推荐 -
color-mix()不接受currentcolor或未展开的变量 →var(--primary)必须是已声明的具体颜色值（如#3b82f6）或已计算好的自定义属性
color-mix() 混合空间选 in srgb 还是 in lch？
in srgb 兼容性最好（Chrome 111+/Firefox 119+/Safari 16.4+），但明度响应非线性：浅色（如 #f0f9ff）混 20% 黑几乎看不出变化，深色（如 #1e40af）混同样比例则明显发灰。若需更均匀的明度衰减，优先用 in lch —— 它的 L 通道更贴近人眼感知，color-mix(in lch, var(--primary) 80%, black 20%) 对不同基础色的“变暗感”更一致。
- Safari 当前（2026 年中）仍不支持
in lch用于color-mix()，仅支持in srgb和in oklab - 不要混用色彩空间：写成
color-mix(in lch, #3b82f6, black)在 Safari 会静默回退到初始色 - 降级必须显式：用
@supports (color-mix: normal)包裹，老浏览器直接跳过整条规则
按钮背景变暗时，color-mix() 和 hsl(from ...) 怎么选？
想让按钮背景悬停时“稳稳变深”，hsl(from var(--primary) h s calc(l - 12)) 比 color-mix() 更直观、更可控。因为 HSL 的 l 就是亮度值（0–100），减 12 就是明确降低 12 个单位，且不改变色相和饱和度，保色性好。
-
color-mix()是“换色”，hsl(from ...)是“调色”——前者适合跨色系过渡（如蓝→紫），后者适合同系深浅变化 -
calc(l - 12)中不能写l - 12%或l - 12px，L 是纯数字，单位错误会导致整条声明失效 - 如果原始色
l是 20，再减 12 得 8，接近纯黑；建议提前检查基础色明度，或加@supports降级为color-mix(in srgb, var(--primary), black 15%)
容易被忽略的空格与分隔符细节
color-mix() 对语法极其敏感，一个空格错位就整个失效。比如 color-mix(in srgb,var(--primary) 80%,black 20%)（逗号后没空格）或 color-mix(in srgb, var(--primary)80%, black 20%)（数字紧贴括号）都会被浏览器忽略。
- 正确格式：
color-mix(in srgb, var(--primary) 80%, black 20%)——in后空格、逗号后空格、颜色与权重间空格，全部不可省 - alpha 通道必须用
/引入，且前后必须有空格：rgb(255 0 0 / 0.7)，写成rgb(255 0 0/0.7)或rgb(255 0 0 /0.7)都无效 - 调试时打开 DevTools，看 computed 样式里 color 是否显示为有效颜色值；若为空或初始色，大概率是语法错误
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
