hue-rotate()需写为hue-rotate(90deg)或hue-rotate(90)，省略单位合法但建议显式写deg；参数超360会取模，450deg等价90deg；灰度图无效，需配合saturate()；不支持ie及旧safari，真机测试需注意ios safari精度偏差。
filter: hue-rotate() 写法和单位必须带 deg
不写单位或写错单位（比如 hue-rotate(90) 或 hue-rotate(90rad)）会导致整个 filter 声明失效，浏览器静默忽略——图片看起来“没反应”，其实不是逻辑错，是语法被丢弃了。
正确写法只有两种：hue-rotate(90deg) 或省略单位的 hue-rotate(90)（CSS 规范允许省略 deg，但建议显式写出，避免团队混淆）。
-
hue-rotate(0)不等于“关闭”，而是“重置为原始色相”；想关掉得设filter: none或删掉该函数 - 参数可超 360，
hue-rotate(450deg)等价于hue-rotate(90deg)，动画时推荐用0deg → 360deg避免跳变 - 多个 filter 同时用必须写在一条声明里：
filter: saturate(1.8) hue-rotate(45deg)，不能拆成两行或两个filter
为什么加了 hue-rotate() 还是没变色？常见干扰项
真正卡住人的往往不是代码，而是图片本身或渲染上下文的隐性限制。
- 灰度图（饱和度为 0）：色相旋转对无色相像素无效，先加
saturate(2)测试是否恢复响应 - 透明通道干扰：PNG 带 alpha 时，半透边缘会被旋转色相，视觉上发“脏”，临时加
background: white对比验证 - 父容器有
opacity 或其他 <code>filter（如blur(2px)）：多个 filter 叠加会相互影响，建议合并为单条声明并调整顺序 - IE 和旧版 Safari（≤13.1）：完全不支持
hue-rotate()，需降级方案（如预生成多张图切换）
如何让色相变化只作用于图片局部？
hue-rotate() 天然全元素生效，真要局部控制，没有“开箱即用”的 CSS 方案。
- 用
<canvas></canvas>手动读取像素、转换 HSL、改色相、重绘——适合动态需求，但大图（>1000×1000）会明显卡顿 - 切图 + 多个
<img>分别套不同filter——适合静态布局，维护成本高 - CSS
mask-image+hue-rotate()组合：能限定生效区域，但兼容性极差（Chrome ≥ 118，Firefox 需-webkit-前缀，Safari 未支持） - 最稳方案：用 PS / Figma 批量导出不同色相版本，JS 控制
img.src切换——零运行时开销，兼容性拉满
iOS Safari 和真机测试的坑
iOS Safari 对 hue-rotate() 的计算精度偏低，±5deg 可能毫无视觉差异，步进建议设为 10deg 起步；更麻烦的是，硬件加速开关、混合模式（mix-blend-mode）、甚至页面缩放状态，都可能让色相表现不一致。
上线前务必用真机加载**实际图片**测，别信模拟器或桌面 Chrome 的 DevTools 预览。尤其注意：alpha 通道、色彩空间（sRGB vs Display P3）、以及是否启用了深色模式——这些都会悄悄改掉你调好的色相效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
