color-mix()不支持currentcolor等动态值，因其仅接受静态颜色；需用js获取计算后颜色再混合，或改用hsla、opacity等更可靠方案。
不能直接用 currentColor 加透明度，但可以用 color-mix() 混合 currentColor 和 transparent —— 前提是：你得先把 currentColor “拍平”成具体颜色值，因为 color-mix() 根本不接受 currentColor 作为输入。
为什么 color-mix(in srgb, currentColor 50%, transparent 50%) 会静默失效
color-mix() 在解析阶段就要求所有颜色参数是**已知、确定、不含变量或关键字**的色值。而 currentColor 是运行时计算的动态引用，不是字面颜色，浏览器遇到它会直接跳过整条声明，不报错、不警告、不 fallback —— 表现就是“颜色没了”，文字变浏览器默认黑或继承链末端的 color。
-
currentColor不是颜色，是“取本元素当前color的计算结果”这个动作，color-mix()不执行动作，只吃静态值 - 同理，
var(--color)、hsl(var(--h), ...)等含变量的写法也全都不行 - 哪怕你父级写了
color: #3b82f6，子元素里写color-mix(in srgb, currentColor, white)依然无效
真正能跑通的替代方案：用 JS 把 currentColor 转成 RGB 后喂给 color-mix()
想让边框/背景/图标等“看起来像带透明度的 currentColor”，必须先拿到它的真实 RGB 值，再参与混合。这一步绕不开 JS：
- 用
window.getComputedStyle(el).color读出计算后的color（返回rgb(59, 130, 246)或rgba(59, 130, 246, 1)） - 用正则或
new DOMException().stack解析出 R/G/B 值（注意：IE 返回rgb，现代浏览器可能返回rgb或hsl） - 调用
el.style.setProperty('--computed-rgb', '59 130 246')，再在 CSS 里写background-color: color-mix(in srgb, rgb(var(--computed-rgb)), transparent 70%) - 监听
color变化需靠MutationObserver或重排触发，无法响应 CSS 动画中的 color 过渡
更轻量、更推荐的实操路径：放弃 currentColor + color-mix() 组合
如果你的目标只是“让装饰色随文字颜色变化，并带可控透明度”，有更稳、更少坑的路：
- 直接用
color: hsl(var(--h), var(--s), var(--l) / var(--a))：把文字色本身拆成 HSL 变量，alpha 单独控制，现代浏览器（Chrome 111+、Safari 16.4+、Firefox 117+）原生支持 - 对 SVG 图标，仍用
fill: currentColor，然后用opacity控制整体透明度（接受它影响子元素） - 对 border 或 background，改用
border-color: rgba(0, 0, 0, 0.3)并配合 JS 同步更新 —— 比折腾color-mix()+currentColor更直觉、更可控 - 若必须无 JS，就老实用两套静态色值层叠：
border-color: #3b82f6; border-color: color-mix(in srgb, #3b82f6, transparent 70%)
关键点在于：CSS 里没有“动态取 currentColor 再实时混合”的语法糖。所谓“currentColor 带透明度”，本质是两个独立需求的叠加——继承颜色 + 控制不透明度——它们在底层机制上就是割裂的，硬凑只会掉进静默失效的坑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
