red、blue、transparent

直接写 red、blue、transparent 就行,浏览器原生支持,不用引号、不加单位、大小写不敏感——但别乱造词,非法关键字会被整条忽略。
哪些颜色关键字能用、哪些会失效
CSS 有两档标准:16 个基础色(IE6+ 全兼容),和 CSS3 新增的约 140 个扩展色(现代浏览器基本都认,但旧 WebView 或压缩工具可能出问题)。
- 稳的:只用这 16 个——
black、white、red、green、blue、yellow、orange、purple、gray/grey、silver、maroon、navy、teal、aqua、fuchsia、lime - 风险点:
rebeccapurple、lightseagreen、aliceblue这类名字在 IE8 或某些嵌入式渲染器里可能被当无效值丢弃,变成默认黑色或透明 - 绝对不能写:
light blue(带空格)、sky(不在标准列表)、red-500(这是 Tailwind 风格,CSS 原生不认) - 查不准?去 MDN 搜 “CSS named colors” 看官方列表,别信拼写近似的词
color、background-color、border-color 都能直接用
所有接受颜色值的 CSS 属性都支持关键字,包括 outline-color、fill(SVG)、stop-color(渐变)等,但注意语义和上下文:
-
transparent是独立关键字,不是rgba(0,0,0,0)的简写,它在可访问性解析和老浏览器中更可靠 -
currentColor是特殊关键字,代表当前元素的color值,常用于 SVG 图标继承文字色,别把它和普通色名混用 - 系统色如
ButtonFace、Highlight能适配 OS 主题,但跨平台表现不一致,Win/mac/Linux 渲染可能完全不同,慎用于生产环境 - 写
color: red;和background-color: red;语法完全一样,没额外规则
关键字不支持透明度,想半透得转数值
你不能写 color: red(0.5); 或 background-color: blue / 0.3;——这种语法根本不存在,浏览器会直接跳过整条声明。
立即学习“前端免费学习笔记(深入)”;
- 要半透的
blue,先查它对应的 RGB 值:blue=rgb(0, 0, 255),再套rgba(0, 0, 255, 0.4) - 或者用 HSL:
hsl(240, 100%, 50%)是纯蓝,加 alpha 就是hsla(240, 100%, 50%, 0.4) - 如果只是整体降透明,用
opacity: 0.4也行,但它影响整个元素(含子节点),不是“颜色本身带透明” - 别依赖自动转换:有些 CSS 工具会把
transparent压成rgba(0,0,0,0),但反过来一般不自动升,别指望它智能补全
真正容易被忽略的是 fallback 机制缺失——关键字一旦不被识别,不会退到备用值,而是静默失败。所以关键路径的颜色(比如错误提示的 red)建议加一层 HEX 备用,哪怕只是多写一行 color: #f00; 放前面。


















