mix-blend-mode 不支持 css 自定义属性（如 var(--my-mode)），因其属关键字枚举型属性，仅接受预定义关键词；需用 javascript 动态设置 style.mixblendmode 或通过 data 属性配合 css 选择器间接切换。
mix-blend-mode 本身不支持 CSS 自定义属性（--my-mode）直接赋值，浏览器解析时会忽略无效值并回退到 normal。这不是写法问题，而是规范限制——该属性的取值必须是预定义的关键词，不能动态计算。
mix-blend-mode 能否用 var()？
不能。即使写成 mix-blend-mode: var(--blend-mode, multiply);，浏览器也会视其为无效声明，等同于没写。DevTools 中能看到该行被划掉，Computed 面板里显示的是 normal。
- 自定义属性只能参与计算、颜色生成、尺寸插值等支持 CSS Typed OM 的场景
-
mix-blend-mode属于“关键字枚举型”属性，类似position或display，没有运行时解析变量的机制 - 所有主流引擎（Blink、Gecko、WebKit）均按此行为实现，无例外
想切换混合模式，但又不想写多套 class？
用 JavaScript 动态设置 style.mixBlendMode 是最直接的替代方案。它绕过 CSS 解析阶段，直接写入有效值。
- 确保传入的字符串是合法关键词，比如
"screen"、"overlay"，不能是空格/拼写错误 - 避免在循环中高频调用，混合模式触发重绘成本较高，尤其在含图片或动画的容器里
- 配合
isolation: isolate使用更安全，防止意外影响兄弟元素的混合范围
示例：
const el = document.querySelector('.blended-text');
el.style.mixBlendMode = 'color-dodge'; // ✅ 有效
el.style.mixBlendMode = getComputedStyle(el).getPropertyValue('--mode'); // ❌ 返回空字符串，无效
有没有纯 CSS 的间接控制方式？
有，但本质是「预设 + 切换」，不是真·变量驱动。利用 :is() 或属性选择器配合 HTML 状态标记，把不同模式编译进静态规则里。
- 给容器加 data 属性：
<div data-blend="lighten"><p>Text</p></div> - 在 CSS 中批量声明：
[data-blend="lighten"] p { mix-blend-mode: lighten; } - 用 JS 控制
dataset.blend = "multiply"即可切换，CSS 规则已就位 - 比 class 切换更语义化，也避免 class 名爆炸
为什么 background-blend-mode 也不行？
一样不行。background-blend-mode 和 mix-blend-mode 共享同一套语法约束。两者都要求字面量关键词，都不接受 var()、calc() 或任何函数式表达式。
容易被忽略的一点：混合效果依赖层叠上下文。如果父容器用了 transform、opacity 或 <code>will-change，可能意外创建隔离上下文，导致 mix-blend-mode 失效——这时候再怎么换变量也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
