color-mix() 是唯一标准且可控的模拟减淡遮罩的颜色生成方案，需显式混入白色（如 color-mix(in srgb, #6a5acd, white 40%)），不支持 whiteness 等参数；兼容性需手动降级，且权重表示颜色贡献比例而非明度提升量。
color-mix() 不支持 whitening、whiteness 或任何“白度”参数——它根本不存在于 CSS 规范中，写 color-mix(in srgb, #6a5acd, white 30%) 是可行的，但写 whiteness(30%) 会直接被浏览器忽略（静默失败）。
用 color-mix() 模拟“减淡遮罩”必须显式混入白色
所谓“减淡遮罩”，本质是让原色视觉上变亮、更接近白色，而不是加透明度。这和 opacity 或 rgba() 完全不同：前者改变颜色值本身，后者只影响绘制时的透出程度。
- 正确做法是用
color-mix(in srgb, @base-color, white <em>weight</em>)，比如color-mix(in srgb, #6a5acd, white 40%) - 权重必须明确写出，
white 40%和white 0.4等价，但不能省略 - 别用
hsl()或lch()空间混白——sRGB 最直观，且能保证多数屏幕下结果可预期 - 如果目标是“像半透明白色层叠在上面”，
mix(white, @color, 20%)（Less）或color-mix(in srgb, white 20%, @color)（CSS）语义更贴近，而非调高亮度
为什么不用 lighten() 或 color-adjust()？
这两个函数都不适合模拟遮罩减淡：
-
lighten(@color, 20%)（Less/Sass）按 HSL 调整亮度，对深紫、藏青等色常导致发灰甚至偏青，失去原色倾向 -
color-adjust()是已废弃的旧提案，现代浏览器完全不支持 -
filter: brightness(1.2)作用于整个元素渲染结果，无法单独控制文字/背景色值，且会影响子元素，不可复用为 CSS 变量 - 真正需要“生成一个新颜色值用于
color或background-color”时，只有color-mix()是标准且可控的路径
兼容性兜底必须手动写，浏览器不会自动 fallback
color-mix() 在 Firefox 119+ 才开始支持，Chrome 111+、Safari 16.4+ 支持，Edge 同 Chrome。这意味着约 15–20% 的真实用户环境会跳过该声明。
- 必须采用“先静态后动态”顺序：
color: #b19cd9; color: color-mix(in srgb, #6a5acd, white 40%); - 不能依赖
@supports (color-mix: normal)包裹——它本身不被旧引擎识别，条件判断也会失效 - 避免用
color-mix()生成关键状态色（如禁用态文字），否则降级后可能和背景色撞车、不可读 - 如果你用的是 CSS 自定义属性，记得 fallback 也要赋值：
--text-light: #b19cd9; --text-light: color-mix(in srgb, var(--primary), white 40%);
mix-blend-mode 不是 color-mix() 的替代方案
看到 mix-blend-mode: screen 或 color-dodge 就想拿来“减淡”，这是常见误解。
-
mix-blend-mode是图层混合，依赖父容器背景；没有背景时它什么也不做 - 它无法生成一个确定的颜色值，所以不能赋给
--mixed-color这类变量复用 - 一旦父容器有渐变、图片或复杂背景，
screen的结果就不可控，可能过曝或失真 - 真正要“让按钮文字在任意背景上都变亮”，得用
color-mix()+light-dark()+ 自定义属性组合，而不是靠混合模式“碰运气”
最易被忽略的一点：color-mix() 的权重不是“提亮百分比”，而是颜色贡献比例。写 white 30% 并不等于“比原色亮 30%”，它只是把白色掺入三成——实际明度变化需实测，尤其当原色饱和度高时，效果可能比预期更柔和或更突兀。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
