hue-rotate()将元素所有颜色按色轮顺时针旋转指定角度，仅改变hsl色相分量，饱和度和明度不变；适用于纯色、单色svg或灰度图标微调，不适用于含透明度、混合模式或关键语义色彩的场景。
hue-rotate() 会改变整个元素的色相，但不等于“调色盘式”选色
hue-rotate() 不是让你挑一个新颜色填进去，而是把元素里所有颜色按色轮顺时针旋转指定角度。比如 hue-rotate(90deg) 把红色（0°）变成黄色（90°），绿色（120°）变成青色（210°），以此类推。它作用于每个像素的 HSL 色相分量，饱和度和明度保持不变。
常见误用是以为设个 hue-rotate(30deg) 就能让按钮“变暖一点”，结果文字、边框、阴影全偏了，可读性反而下降。它适合整体风格微调（如夜间模式滤镜）、趣味动效，或统一处理 SVG 图标集——前提是原始图标本身是灰度或低饱和配色，否则旋转后容易出现意外高饱和噪点。
对非纯色元素效果不可控，尤其含透明度或混合模式时
当元素有 opacity、rgba() 颜色、或父级用了 mix-blend-mode，hue-rotate() 的输入色值已不是原始 RGB，计算结果会偏离直觉。例如一个半透明白色背景上的黑色文字，经过 filter: hue-rotate(180deg) 后，文字可能泛出淡青而非预期的“反色灰”。
实操建议：
- 优先在纯色块、单色 SVG 或 PNG（无 alpha 通道）上测试
hue-rotate() - 避免叠加多个 filter 函数（如
hue-rotate()+brightness()），顺序不同结果差异大，Chrome 和 Safari 对复合 filter 的解析仍有细微差别 - 若需精确控制某一部分颜色，改用 CSS 自定义属性 +
hsl(var(--h), var(--s), var(--l))更可靠
数值范围是 0–360deg，但超过 360 会自动取模，别硬凑“更强烈”
写成 hue-rotate(720deg) 和 hue-rotate(0deg) 效果完全一样；hue-rotate(450deg) 等价于 hue-rotate(90deg)。浏览器内部做的是 angle % 360 运算。
有人试图用极大数值制造“动态过载感”，比如 CSS 动画从 0deg 到 1080deg，其实只是转了三圈，视觉上并无额外效果，还可能因插值精度导致停顿感。真正影响观感的是变化速率与起止角度差，不是绝对数值大小。
推荐做法：
- 动画用
0deg → 360deg或0deg → 180deg，清晰可控 - 调试时用 devtools 实时拖动 slider，比反复改数字更快定位目标色相
- 注意：CSS filter 是 GPU 加速的，但频繁动画仍可能触发重绘，对长列表或复杂布局慎用
IE 完全不支持，移动端需留意旧版 Android Webview
filter 属性在 IE 中完全无效；Android 4.4 及更早的系统 WebView 对 hue-rotate() 支持不稳定，可能出现黑块或直接忽略。CanIUse 数据显示，目前主流 Chrome/Firefox/Safari/Edge 均支持，但部分鸿蒙早期版本或定制 ROM 内置浏览器可能降级处理为 grayscale(100%)。
如果项目必须兼容旧环境：
- 用
@supports (filter: hue-rotate(1deg))做特性检测，提供 fallback 样式 - 避免将
hue-rotate()用于关键信息传达（如错误状态红标），它不该是语义的一部分 - SVG 内联时，可用
<fecolormatrix type="hueRotate" values="90"></fecolormatrix>作为 filterPrimitive 备选，但维护成本更高
最常被忽略的一点：hue-rotate 对 CSS 渐变（linear-gradient）生效，但只作用于渐变色 stops 的最终合成色，而不是逐点旋转——这意味着斜向渐变的中间过渡色可能变得不自然，需要手动拆解 stop 点验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
