所有浏览器都无条件支持的颜色关键字只有transparent和16个基础色：black、white、gray、red、blue、green、yellow、cyan、magenta、orange、purple、pink、brown、lime、navy、teal。
哪些 CSS 颜色关键字是所有浏览器都认的
只有 transparent 和 16 个基础色（black、white、gray、red、blue、green、yellow、cyan、magenta、orange、purple、pink、brown、lime、navy、teal）在所有现代浏览器中无条件支持。别以为 rebeccapurple 或 aliceblue 能随便用——IE 11 不认识前者，Android 4.3 WebView 会把后者当无效值丢掉。
-
rebeccapurple是 2014 年加进 CSS Color Level 4 的，Chrome 52+、Firefox 49+ 才开始支持，旧版 Safari 完全无视 -
transparent看似简单，但 IE 8 及更早版本不支持它作为background-color值（只认rgba(0,0,0,0)） - 像
lightcoral、slategray这类“X11 颜色名”其实是 CSS Level 3 引入的，Android 4.4 之前的 WebView 解析时会静默失败，不报错也不生效
rgba() 和 hsl() 比颜色关键字更稳吗
不是“更稳”，而是“可控”。颜色关键字本质是别名，背后映射的 RGB 值由规范固定，但浏览器实现可能滞后；而 rgba() 和 hsl() 是函数式语法，只要浏览器支持该函数，计算逻辑就确定，不会因名字拼写或历史包袱出错。
-
rgba(255, 0, 0, 0.5)在所有支持 rgba 的浏览器中都等于半透红色，不依赖任何命名表 -
hsl(0, 100%, 50%)永远是纯红，哪怕某天规范把red改成别的值（当然不会），它也不受影响 - 注意：
hsla()在 IE 9+ 才支持，IE 8 只认rgba()；而 iOS 6 Safari 对hsl()的 hue 角度解析有轻微偏差（比如hsl(360, ...)有时被截断为 0）
想用新颜色名又得兼容老环境，怎么折中
别靠 JS 检测后替换，太重。直接用 CSS 层叠 + fallback：把新关键字写在前面，老关键字或函数写在后面，浏览器跳过不认识的值，自然回退。
button {
background-color: rebeccapurple;
background-color: #663399;
}
- 顺序不能反——CSS 从左到右解析，遇到非法值就跳过，继续看下一个声明
- 避免混用类型：不要写
color: rebeccapurple; color: rgba(102, 51, 153, 1);，因为rgba()在 IE 8 里整个声明会被忽略，导致没 fallback - 工具链里可以用
postcss-color-function或autoprefixer（配合color-mod()插件）自动补老写法，但注意它不处理自定义关键字
透明色除了 transparent，还有哪些坑
transparent 是唯一被当作“颜色值”而非“特殊关键字”对待的透明表示法。其他看似透明的写法，比如 rgba(0,0,0,0) 或 hsla(0,0%,0%,0)，在部分场景下行为不一致。
立即学习“前端免费学习笔记（深入）”；
- CSS 动画中，
transparent→red的过渡是平滑的；但rgba(0,0,0,0)→red在 Safari 15.4 之前会先闪一下黑，因为 alpha 通道和 RGB 通道被分别插值 - SVG 的
fill属性里，transparent能正确触发“无填充”语义（等价于none），而rgba(0,0,0,0)仍算作有填充，可能影响 pointer-events - 打印样式表中，某些打印机驱动会把
rgba(0,0,0,0)渲染为极淡灰，而transparent明确不输出油墨
颜色关键字看着省事，但每个名字背后都有规范版本、浏览器实现节奏、甚至印刷引擎的隐性约束。真要保底，就别信名字，信数字。
