旧版浏览器（如IE8、Android 2.3）不支持rgb()和hsl()，需用#ff0000等十六进制值替代；rgba()和8位hex同样不兼容，应采用fallback+渐进增强策略，并人工校验HSL转HEX精度。
旧版浏览器不认 rgb() 和 hsl() 怎么办
IE8 及更早版本、Android 2.3 默认浏览器、部分老款国产双核浏览器（如早期 QQ 浏览器）压根不解析 rgb(255, 0, 0) 或 hsl(0, 100%, 50%)，直接当无效值丢弃，退成默认色（通常是黑色或透明）。这不是写法错，是解析器根本没实现这些函数。
- 优先用
#ff0000替代rgb(255, 0, 0)，十六进制是 CSS 1 就支持的，兼容性无死角 -
hsl()在 IE9+ 才开始支持，连 IE8 都不行，别在需要兼容它的项目里用 - 如果用了预处理器（如 Sass），别依赖
rgb()函数自动转——它不会帮你降级成十六进制，得手动写或加插件
哪些颜色值会被旧浏览器静默忽略
不是所有现代写法都会报错，很多是“看起来正常但实际没生效”，比如背景色消失、边框变黑、文字变默认灰。典型静默失效项：
-
rgba(0, 0, 0, 0.5)：IE8 及以下完全不识别，alpha 通道直接丢，整条声明作废 -
hsl(120, 100%, 50%)：IE8 解析失败，不触发 fallback，也不报 warning -
color: #0000ff80（8 位十六进制）：Chrome 62+ 支持，但 IE、Edge 17-、所有安卓 4.4 以下全挂
怎么安全地用半透明又兼顾老浏览器
真要透明效果又得保 IE8，不能只靠 rgba()。得准备 fallback + 渐进增强：
- 先写
background-color: #0000ff（十六进制纯色）作为兜底 - 再写一行
background-color: rgba(0, 0, 255, 0.5)，支持的浏览器会覆盖上一行 - IE8 及以下看不到半透明，但至少有颜色；别指望它能渲染 alpha，也别用
filter: alpha(opacity=50)混用——它和rgba()冲突，反而导致颜色异常
自动化检测和替换的现实约束
CI/CD 里跑 PostCSS 插件（如 postcss-color-function）能转 hsl() → #hex，但注意边界：
- 它不处理变量里的颜色，比如
$primary: hsl(200, 100%, 50%)在 Sass 中仍会编译出hsl() - 动态生成的颜色（JS 里拼字符串
`hsl(${h}, ${s}%, ${l}%)`）完全绕过构建流程，必须人工改 - 设计系统中若定义了 “主色 = hsl(210, 70%, 50%)”，文档和代码得同步改成十六进制，否则开发照着文档写就踩坑
最麻烦的是设计师给的标注稿里全是 HSL 值，前端得自己换算——别信在线转换工具四舍五入后的结果，hsl(210, 70%, 50%) 对应的是 #2a66c7，不是 #2a67c7，差一位在低分辨率屏上都可能露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
