hue-rotate()是色相旋转而非替换，原始色相分散（如红、蓝、灰混杂）导致各元素偏移方向不同，故hue-rotate(180deg)无法统一变蓝，反出现紫、灰等杂色；需先用grayscale/sepia压平色相再旋转。
hue-rotate() 不是“把图变红”，而是把图里每个像素的色相值统一加一个角度。它有效，但非常依赖原始颜色分布。
为什么 hue-rotate(180deg) 没让按钮变蓝，反而发紫还带灰？
常见错误现象：目标是统一品牌色 #2563eb（HSL h≈222），但直接写 filter: hue-rotate(180deg) 后，按钮文字、边框、图标各自偏移不同方向，整体失控。
- 原始 UI 元素若含多色（比如蓝色按钮+红色 icon+灰色文字），
hue-rotate()会分别旋转各自的色相 —— 红（h≈0）转 180 变青，蓝（h≈210）转 180 变橙，结果就是杂色乱飞 -
hue-rotate()不动饱和度和明度，所以原图越灰、越暗，调完越脏；纯灰度图（grayscale(100%)）上用它完全没反应 - 浏览器渲染层限制：若元素有
opacity、transform或父级启用了will-change: transform，可能干扰滤镜生效顺序，尤其在 Safari 中
怎么让 hue-rotate() 真正可控？
核心思路：别硬调，先压平再旋转。不是所有图都适合直接上 hue-rotate。
- 检查原始色相集中度：用浏览器 DevTools 吸管取按钮主色、图标、边框三处的 HSL 值，看
h是否落在 ±30° 范围内。超出就别指望单次旋转精准对齐 - 预处理优先：对杂色 UI，先用
grayscale(100%) sepia(80%)压平层次，再叠hue-rotate()—— 这比裸调更稳 - 组合微调比单值可靠：
filter: grayscale(0.9) saturate(1.3) hue-rotate(7deg)比单纯hue-rotate(7deg)更接近目标色，尤其对低饱和原始素材 - 注意顺序：
hue-rotate()应放在filter值最前面，否则被后续brightness()或saturate()影响色相表现，容易发灰
iOS Safari 和 Firefox 对 hue-rotate() 的兼容性坑
不是不支持，是渲染路径不同导致效果漂移或动画卡顿。
- iOS Safari 中，
hue-rotate()在文字上易突然变暗、闪烁甚至消失，尤其配合position: fixed或transform: translateZ(0)时 —— 解法是套一层 wrapper，只对 wrapper 动filter - Firefox 对文本节点的
filter支持弱于 Chrome，hue-rotate动画可能出现跳帧；加will-change: filter有帮助，但别滥用，否则触发不必要的合成层 - 真机调试时发现颜色异常，先关深色模式 —— 某些系统级色彩管理会覆盖 CSS 滤镜输出，尤其在 macOS / iOS 17+ 上
hue-rotate(XXdeg)，而是判断这张图/这个组件到底适不适合用它。原始色越“干净”，它越听话；越杂，越得靠 grayscale + saturate + brightness 组合兜底。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
