color-mix() 仅执行线性数学插值，不模拟真实画笔的透明度叠加、非线性响应或纹理交互；它输出纯色，需配合 mix-blend-mode、伪元素、多层定位及背景参与才能逼近画笔效果。
color-mix() 不是颜料混合，它不模拟画笔效果；它只做线性插值，而真实画笔依赖透明度叠加、边缘扩散、纹理交互——这些它全都不处理。
color-mix() 的本质是数学插值，不是物理混合
浏览器执行 color-mix(in srgb, red 60%, blue 40%) 时，只是算：rgb(255×0.6 + 0×0.4, 0×0.6 + 0×0.4, 0×0.6 + 255×0.4) → rgb(153, 0, 102)。这个结果和你画布上有没有纸、底下是不是黄色底色、笔触是否半透，完全无关。
所谓“颜料模型”（如CMYK叠印、湿画法混色）需要：
- 多层 alpha 叠加（
color-mix()不读取背景，也不输出带透明度的值） - 非线性响应（比如深色区域更容易吃色，浅色区域更易提亮——
mix-blend-mode: overlay才有这逻辑） - 边缘模糊或纹理干扰（
color-mix()输出纯色块，无空间信息）
想模拟画笔效果，必须绕过 color-mix()，用真正参与渲染的混合机制
以下方案能逼近真实画笔感，且无需 JS：
- 用
mix-blend-mode: multiply或screen配合半透色块盖在纹理/渐变背景上——这是最接近“颜料压在纸上”的方式 - 把画笔当作一层
::before伪元素，设background: radial-gradient(circle at center, rgba(255,215,0,0.3), transparent 60%)+mix-blend-mode: soft-light，再配合transform: translate()模拟拖动轨迹 - 若需多笔触叠加，必须用多个绝对定位元素，每层独立设
mix-blend-mode和opacity，不能指望单个color-mix()表达累积效果
注意：mix-blend-mode 生效前提是背后有内容可混——父容器必须有背景（哪怕只是 background-color: #f9f9f9），且不能被 isolation: isolate 或 opacity: 0.99 切断层叠上下文。
color-mix() 唯一能帮上忙的地方：静态配色推导
它适合提前算好一套“画笔调色盘”，比如：
- 从主色
#2563eb按不同浓度生成干画、湿画、枯笔的基准色：color-mix(in lch, #2563eb 80%, white)、color-mix(in lch, #2563eb 40%, white) - 但这些颜色仍要作为
background-color或color落到真实 DOM 元素上，再靠mix-blend-mode或 Canvas 实现动态混合 - 务必写 fallback：
background-color: #2563eb; background-color: color-mix(in lch, #2563eb, white 30%)，因为 Firefox 默认仍需开启实验标志，Safari 不支持in oklch
真正容易被忽略的是：画笔效果从来不是“一个颜色 + 一个函数”能解决的——它是空间（位置/大小）、时间（拖动/速度）、材质（纸纹/笔锋）、光学（透光/反射）共同作用的结果。color-mix() 连其中任意一维都碰不到，硬套只会让调试变成猜谜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
