只放心使用css 2.1规定的16个基础色：black、white、gray/grey、red、green、blue、yellow、orange、purple、fuchsia、maroon、navy、teal、aqua、lime、olive、silver（共17个，含gray/grey别名），它们在ie6+及所有现代浏览器中100%兼容；其余如rebeccapurple、lightseagreen等css3扩展色在旧版safari或嵌入式webview中会静默失效，导致颜色回退为默认黑色或透明。
直接用 red、blue、green 这类关键字就能设颜色，但不是所有“像颜色的词”都合法，也不是所有浏览器都认全——得挑着用、备着退路。
哪些颜色关键字能放心写？
只依赖 CSS 2.1 规定的 16 个基础色，它们在 IE6+ 到最新 Chrome/Firefox/Safari 全部原生支持，零兼容风险：
-
black、white、gray（或grey，两者都行） -
red、green、blue、yellow、orange -
purple、fuchsia、maroon、navy、teal、aqua、lime、olive、silver
别碰 lightseagreen、rebeccapurple 这类扩展名——旧版 Safari 或某些 WebView 会直接忽略整条声明，不报错也不 fallback，结果就是文字/背景变成默认色（常是黑色或透明）。
color: red; 为什么有时没生效？
常见失效原因不是语法错，而是被后续规则覆盖或继承干扰：
- 父元素写了
color: #333;，子元素没显式声明，就继承了灰黑，不是red没加载 - 写了
color: red;又紧跟color: #ff6b6b;，后者会覆盖前者（CSS 层叠顺序决定） - 用了拼写错误：比如
light-blue（带短横）、light blue（空格）、LightBlue（首字母大写虽不报错但违反惯例，易引发协作混乱） - 在伪类里漏写了：比如
a:hover { color: red; }没加，鼠标悬停时还是默认蓝
想用 lightgray 却要兼容老环境？
lightgray 和 lightslategray 这类“light-”前缀名属于 CSS3 扩展色，IE8 及更早版本不支持。稳妥做法是双写：
button {
background-color: #d3d3d3;
background-color: lightgray;
}
注意顺序：**备用值写前面，关键字写后面**。浏览器从左到右解析，不认识 lightgray 就跳过，继续用前面的 #d3d3d3；认识的话就覆盖掉。反着写就白写了。
currentColor 是什么？别和普通关键字混用
currentColor 是个特殊关键字，它不是固定颜色，而是**动态取当前元素的 color 值**：
-
border: 1px solid currentColor;→ 边框色 = 文字色 - 用在 SVG 的
fill或stroke上，能自动同步文字主题色 - 但它不能当普通色名用：比如
background-color: currentColor;在没有设置color的元素上，会退成black，不是透明或无色 - 别写
color: currentColor;—— 这等于自引用，虽然合法但毫无意义
真正容易被忽略的是：关键字全都不带 alpha 通道。你要半透的 blue，必须转成 rgba(0, 0, 255, 0.4) 或 hsla(240, 100%, 50%, 0.4)，写 color: blue(0.4); 浏览器直接扔掉整条声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
