CSS中的hue-rotate通过filter属性调整元素颜色色调，语法为hue-rotate(angle)，角度范围0deg到360deg，实现色轮旋转效果，如90deg偏黄绿、180deg反色、360deg复原；常用于夜间模式、悬停动画或主题切换，可与saturate等滤镜组合使用，但对黑白灰及透明区域影响小，且作用于整个元素渲染层。
在CSS中使用 hue-rotate 可以调整图像或元素的颜色色调，它是 filter 属性的一个功能。通过改变色相值，可以让颜色在色轮上旋转，从而实现色彩的变换。
语法与用法
hue-rotate(angle) 接收一个角度值作为参数，单位是 deg（度）。色相范围是 0deg 到 360deg，代表色轮上的不同颜色位置。
常见角度示例：
- 0deg：原色
- 90deg：向绿色/黄色方向偏移
- 180deg：反色色调（如红变青）
- 270deg：进一步旋转
- 360deg：回到原色，等同于 0deg
.color-shift {
filter: hue-rotate(90deg);
}
应用场景
这个滤镜常用于动态调整图标、图片或背景的颜色，而无需准备多套资源。比如：
立即学习“前端免费学习笔记（深入）”；
- 夜间模式下统一调整图标的颜色风格
- 悬停时让图片产生色彩变化动画
- 根据主题切换动态改变界面色调
支持与其他 filter 函数组合使用：
.fancy-effect {
filter: hue-rotate(180deg) saturate(2);
}
注意事项
hue-rotate 只影响颜色，对透明区域或纯黑/白灰区域效果不明显。它作用于整个元素的渲染结果，包括背景图和子元素（如果未隔离图层）。
若需要更精确控制某部分颜色，建议结合 mix-blend-mode 或使用 SVG 滤镜。
