color-mix() 不能直接替换 filter: brightness()，因前者仅生成新颜色值作用于指定属性，后者是作用于整个渲染盒的视觉后处理。
color-mix() 能不能直接替换 filter: brightness()
不能直接替换，二者解决的问题根本不同：filter: brightness() 是视觉后处理，作用于整个渲染盒（含子元素、阴影、边框、透明度）；而 color-mix() 只生成一个新颜色值，只影响被设置的属性（如 color、background-color、border-color）。拿按钮文字举例：用 filter 提亮会连带把图标、边框阴影一起过曝；用 color-mix() 则只改文字色，可控性高得多。
哪些场景下 color-mix(in srgb, ...) 是更稳的选择
当你需要精确控制某一个颜色属性，并且它必须在深/浅背景上都保持可读性时，color-mix() 更可靠：
- 强调色边框：比如
border-color: color-mix(in srgb, var(--accent) 60%, #1e1e1e 40%)，在深灰背景上自动压暗，比filter: brightness(0.8)不会误伤图标或文字 - 禁用态文本：写成
color: color-mix(in srgb, var(--text-primary) 70%, #94a3b8 30%)，比filter: brightness(60%) contrast(50%)更稳定——后者在深色模式下可能让文字彻底糊进背景里 - 主题色提亮变体：用
background-color: color-mix(in srgb, var(--primary) 80%, white 20%)生成浅版按钮底色，不依赖父容器是否开启filter，也不影响子元素的svg图标颜色
容易翻车的三个硬限制
color-mix() 在生产中不是“写了就能用”，漏掉任一条件就会静默失效：
- 必须显式声明色彩空间：
color-mix(in srgb, ...)缺少in srgb在 Safari 16.4 之前和部分旧版 Chrome 中会被完全忽略，不报错也不回退 - 权重不能是变量表达式：
color-mix(in srgb, var(--accent) calc(var(--alpha) * 100)%, white 20%)会解析失败；得提前算好百分比，或用构建时工具注入固定值 - 混合目标必须是已解析颜色：
white、#fff、rgb(255 255 255)都行，但currentColor或另一个自定义属性如var(--bg)无法参与混合（除非该变量本身已被浏览器解析为具体颜色）
深色模式下别指望 color-mix() 自动适配
color-mix() 本身不感知 prefers-color-scheme。如果你写 color-mix(in srgb, var(--accent) 70%, white 30%)，它在深色模式下依然混白色，结果可能发灰发脏。真正靠谱的做法是：
- 用
light-dark(white, black)（Chromium 123+ 支持）：例如color-mix(in srgb, var(--accent) 70%, light-dark(white, black) 30%) - 降级方案：在
@media (prefers-color-scheme: dark)块里单独定义--accent-lighten: color-mix(in srgb, var(--accent) 70%, #1e1e1e 30%)，再引用 - 测试重点不是“看起来差不多”，而是检查 WCAG 对比度——深灰背景上混 30% white 往往不够，有时得换成背景色本身才能达标
最常被忽略的一点：你用 color-mix() 替换 filter: brightness()，不是为了“更现代”，而是为了把颜色逻辑从不可控的渲染层，拉回到可预测、可测试、可审计的样式声明层。一旦混入变量和媒体查询，它就不再是语法糖，而是颜色系统的基础设施——写错一个空格，整套强调色就消失不见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
