rebeccapurple 是标准化色值 #663399，非主题色变量，需强制 fallback（如 color: rebeccapurple; color: #663399;），因旧浏览器直接忽略该关键字且无降级机制，大小写敏感，不被主流编辑器补全。
rebeccapurple 不是“更好看的 purple”，而是有明确语义边界的 CSS 变量替代品
它本质是一个被标准化的、带人文背景的固定色值 #663399，不是设计系统中可随意替换的“主题色”。它的实战意义不在于视觉独特性，而在于：当团队约定“主紫”就指 rebeccapurple 时，它能替代一个 CSS 自定义属性（如 --primary-purple）承担语义锚点作用——前提是全栈环境已统一支持该关键字。
但要注意：rebeccapurple 在 IE11 及更早版本、Android 4.3 WebView、Safari 8 之前完全无效，且不会 fallback 到 purple 或其他值，声明直接被忽略。这意味着它不能作为独立颜色使用，必须配 fallback。
必须写 fallback 的真实原因不是“兼容旧浏览器”，而是 CSS 解析机制本身
CSS 颜色关键字是原子级解析的：浏览器查表匹配名称，查不到就跳过整条声明，不尝试近似、不继承、不报错。这和字体族名（font-family: "PingFang SC", sans-serif;）的 fallback 逻辑完全不同。
所以正确写法永远是：
立即学习“前端免费学习笔记（深入）”；
button {
border-color: rebeccapurple;
border-color: #663399; /* fallback，必须后置 */
}常见错误包括：
- 只写
border-color: rebeccapurple;，在 Safari 9 或微信内置 WebView（X5 内核早期版）中边框消失 - 用逗号写成
border-color: rebeccapurple, #663399;—— 这是语法错误，整条声明失效 - 把 fallback 放前面，如
border-color: #663399; border-color: rebeccapurple;—— 现代浏览器会覆盖，但旧浏览器根本看不到第二行，等于没 fallback
VS Code 和 WebStorm 不补全 rebeccapurple 是故意为之
它不属于 CSS2.1 或 CSS3 标准初始关键字集，而是 CSS Color Level 4 的后期加入项。主流编辑器的 CSS 语言服务默认基于较老规范构建，不会为非核心关键字提供自动补全。
这意味着你必须手动敲全名，且注意大小写敏感：Rebeccapurple、rebeccaPurple、rebeccapurple 中只有最后一个有效。拼错一个字母，整条颜色声明就静默失效。
实操建议：
- 在项目根目录的
.vscode/settings.json中添加"css.lint.unknownAtRules": "ignore"可减少误报，但无法解决补全问题 - 如果团队高频使用，建议在 CSS 变量中封装：
--color-primary: rebeccapurple; --color-primary-fallback: #663399;，再通过color: var(--color-primary); color: var(--color-primary-fallback);使用 - CI 流程中可用 PostCSS 插件检测未带 fallback 的
rebeccapurple出现位置，提前拦截
它真正不可替代的场景：currentColor 联动与 SVG 填充继承
currentColor 会精确继承 color 属性的计算值，而 rebeccapurple 是少数几个能稳定参与该继承链的颜色关键字之一——相比 transparent 或 inherit，它提供了确定的色相锚点。
例如在 SVG 图标内嵌样式中：
svg.icon path {
fill: currentColor;
}
.button {
color: rebeccapurple;
color: #663399;
}此时 SVG 图标会准确渲染为 #663399，且无需 JS 控制或额外 class。这种组合在组件库中特别实用，但前提是 color 声明本身已带 fallback。
容易被忽略的一点是：若父元素用 color: rebeccapurple; 但没 fallback，子 SVG 的 fill: currentColor 在旧浏览器中会继承到 initial（通常是黑色），而非透明或默认色——这是由 currentColor 的继承规则决定的，不是 bug。
