纯css无法真正模拟cmyk色彩空间，因浏览器基于srgb渲染，cmyk()函数仅限单色声明且支持极低，渐变中使用会直接被忽略；需用rgba色值分层叠加配合multiply混合模式及暖白底色逼近印刷效果。
纯 CSS 无法真正模拟 CMYK 色彩空间，因为浏览器渲染始终基于 sRGB（或 display-p3 等设备相关 RGB 空间），color-mix() 和 color() 函数目前也不支持 cmyk() 输入作为渐变色 stops。所谓“CMYK 效果”，只能是视觉近似——用青、品、黄、黑四色按印刷叠印逻辑组织渐变结构，再辅以透明度与混合模式模拟油墨叠加感。
为什么不能直接用 cmyk() 写 linear-gradient
截至 2026 年，所有主流浏览器均不支持在 linear-gradient() 或 radial-gradient() 中使用 cmyk(100% 0% 0% 0%) 这类语法。CSS Color Level 4 规范虽定义了 cmyk() 函数，但它仅用于单色声明（如 color: cmyk(100% 0% 0% 0%)），且实际支持度极低（Chrome 128+ 实验性开启需 flag，Firefox/Safari 未实现）。尝试写入渐变会直接被忽略或降级为 transparent。
- 浏览器解析时遇到未知颜色函数，会跳过整个 color-stop
- 即使部分引擎识别
cmyk()，也无法保证其在渐变插值中行为符合印刷物理模型（比如青+品≠蓝，而是更浑浊的紫灰） - CMYK 是减法混色，CSS 渐变是加法插值，二者数学基础冲突
用 sRGB 颜色 + 混合模式逼近印刷叠印感
关键不是“换颜色名”，而是重构图层关系：把每个“油墨色”当作一层半透明覆盖层，用 background-blend-mode 控制叠加方式。真实印刷中，CMY 叠加区域会变暗、饱和度下降，这可通过 multiply 或 darken 模拟。
- 用
rgba(0, 180, 255, 0.7)近似青（C），避免纯#00bfff过亮 - 用
rgba(255, 0, 128, 0.7)近似品红（M），避开荧光感强的#ff0080 - 用
rgba(255, 220, 0, 0.6)近似黄（Y），降低亮度匹配纸张底色 - 黑（K）用
rgba(30, 30, 30, 0.8)，而非纯黑#000，保留纸张纹理感 - 将四层渐变用逗号分隔写入
background-image，再设background-blend-mode: multiply
示例：
div {
background-image:
linear-gradient(135deg, rgba(0,180,255,0.7), transparent 70%),
linear-gradient(45deg, rgba(255,0,128,0.7), transparent 70%),
linear-gradient(-45deg, rgba(255,220,0,0.6), transparent 70%),
linear-gradient(225deg, rgba(30,30,30,0.8), transparent 70%);
background-blend-mode: multiply;
background-color: #fffdf8; /* 暖白底纸色 */
}
避免硬边与过度饱和的实用技巧
真实印刷有网点扩大、油墨扩散，CSS 渐变默认锐利过渡会显得“数码感”太重。必须主动柔化。
- 所有 color-stop 的位置不要写死
0%, 100%，改用0%, 15%, 85%, 100%制造缓冲区 - 在关键交界处插入中间色 stop，例如青与品交叠区加
rgba(120, 0, 120, 0.4)模拟叠印紫灰 - 对整体容器加轻微
filter: blur(0.3px)（仅在高 DPR 屏幕下启用），比用 box-shadow 模拟更自然 - 禁用
background-repeat，防止平铺后出现机械重复感——印刷底纹本就是微扰动的
最易被忽略的是纸张基底：CMYK 效果是否成立，70% 取决于你选的 background-color。用冷白（#ffffff）会让青/品发荧光，暖米白（#fdf8f0）或微灰（#f8f7f5）才能压住油墨感。别只调渐变，先定纸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
