color-mix()是唯一能用css变量动态生成灰阶色的原生方案，需写成color-mix(in srgb, var(--icon-color) 30%, gray(70%) 70%)形式，显式声明色彩空间且不可省略比例，不支持from或lightness()等草案语法。
color-mix() 是唯一能“相对变灰”的 CSS 原生方案
想用 var(--icon-color) 动态生成灰阶色？目前只有 color-mix() 能做到，且必须写成 color-mix(in srgb, var(--icon-color) 0%, gray(50%) 100%) 这种形式。它不是“把颜色变灰”，而是“用原色和灰色按比例混合”——所以你得主动指定灰度成分占比，不能只写 color-mix(from --icon-color, gray(50%))，后者语法无效，浏览器会静默丢弃整条规则。
常见错误现象：oklch(from var(--c) l c h) 或 lightness(var(--c)) 看起来很美，但所有稳定版浏览器（Chrome 107+、Firefox 111+、Safari 16.4+）都不支持 from 关键字或 lightness() 函数，DevTools 里直接标红或忽略。
-
color-mix()必须显式声明色彩空间，in srgb是最稳妥选择；漏掉它，部分 Safari 版本（如 16.0–16.3）会跳过整条声明 - 不支持从自定义属性提取 OKLCH 分量，
color-mix(in oklch, from --c l c h)是草案语法，尚未实现 - 若需真正“保留色相只降饱和”，得靠 JS：取
getComputedStyle(el).color→ 转 OKLCH → 设c: 0.01→ 再转回 sRGB，这已超出纯 CSS 范畴
filter: grayscale() 不是“颜色变灰”，而是渲染层覆盖
给图标加 filter: grayscale(100%) 确实一键生效，但它不改变 color 或 fill 值本身，只是在绘制时对整个图层做像素级灰度转换。这意味着：
- 如果图标是 SVG 内联写的
<path fill="var(--icon-color)"></path>，滤镜会让它变灰，但fill值仍是原始色，无法被transition动画的 color 通道捕获 - 子元素（比如 SVG 里的
<text></text>或伪元素）全被拖下水，没法单独“保色” - 在暗色模式下想关灰度？仅靠
@media (prefers-color-scheme: dark)无法覆盖 filter，必须用 JS 切换 class 或修改 CSS 变量
真正要“局部可控”，就得放弃 filter，改用 color-mix() 配合变量重定义图标色，例如：color: color-mix(in srgb, var(--icon-color) 20%, gray(60%) 80%)。
SVG 图标用 fill 时，灰度化必须作用于 color 层而非渲染层
多数现代图标系统（如 iconfont、inline SVG）依赖 fill 或 color 控制颜色。这时直接对父容器加 filter 很危险——它会把文字、边框、阴影全卷进去。更稳的做法是让图标自身“知道”该用什么灰阶色：
- 定义基础色：
:root { --icon-primary: #3b82f6; } - 定义灰阶衍生色：
--icon-primary-gray: color-mix(in srgb, var(--icon-primary) 30%, gray(70%) 70%); - 在需要灰度的上下文中，显式设
fill: var(--icon-primary-gray)或color: var(--icon-primary-gray)
这样做的好处是：可配合 transition: color 0.2s 实现平滑渐变；可被 @media (prefers-contrast: high) 响应式控制；不会误伤邻近元素。
别指望 grayscale() 参数能“动态插值”，单位不统一就失效
想用 transition 让图标从彩色渐变到灰阶？filter 的过渡极其脆弱：
- 起始值写
grayscale(0%)，结束值写grayscale(1)—— 单位混用，浏览器无法插值，直接跳变 - iOS Safari ≤12 不支持
filter过渡，@supports (filter: grayscale(0%))才能安全启用动画 - 即使参数格式一致，
grayscale()的算法在各浏览器中也不完全相同（尤其老 Safari），导致灰度深浅肉眼可见差异
真正可控的渐变路径只有一条：用 color-mix() 搭配 CSS 变量 + transition: color，例如：color: color-mix(in srgb, var(--c) calc(100% - var(--gray-ratio)), gray(50%) var(--gray-ratio));，再由 JS 动态改 --gray-ratio。但这要求你接受——纯 CSS 无法自动“读取并处理变量值”，必须手动定义灰阶梯度档位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
