css颜色声明写错字符会静默忽略而非报错；十六进制仅支持3位（#rgb）或6位（#rrggbb），字母限a–f，非法字符或位数错误（如#ff00gg、#1234）均无效且无fallback；rgb()/rgba()参数不可带单位或引号，alpha须为0–1小数；hsl()中s/l必须带%，颜色值严禁加引号。
颜色声明写错一个字符，浏览器就当它不存在——不是报错，而是静默忽略，连控制台都不提醒。
十六进制颜色里混入非法字符或位数不对
浏览器只认 #rrggbb（6位）或 #rgb（3位），且字母只能是 a–f（大小写不敏感）。#ff00gg、#1234、#abcde 全部无效，不会 fallback 到最近合法格式，也不会报错。
- 常见翻车：从设计稿复制颜色时带空格或换行符，粘贴后变成
#ff00 gg；手误打成#ff00zz - VS Code 默认不校验，得装插件（比如
Autocomplete Color）或配stylelint的color-no-invalid-hex规则 - 开发者工具里看 Styles 面板：
background-color: #ff00gg会显示删除线，Computed 里根本查不到这条属性
rgb() / rgba() 参数类型和分隔符出错
rgb() 和 rgba() 对参数极其敏感：数值不能带单位、不能加引号、逗号必须是英文、alpha 必须是 0–1 小数。
-
rgb(255px, 200, 100)❌、rgb("255", 200, 100)❌、rgb(255, 200, 100%)❌（混用单位） -
rgba(0, 0, 0, 50%)❌ —— alpha 只能是0.5，不是50%或50 - 中文逗号、全角空格、多空格（如
rgb(255, 200, 100)）不影响解析，但中文符号直接让整条失效
hsl() / hsla() 中 s 和 l 忘记写 %
h 是角度（可省略 deg），s 和 l 必须带 % 单位。漏掉任何一个 %，整条声明就作废。
-
hsl(240, 100, 50)❌、hsl(240, 100%, 50)❌、hsl(240deg, 100, 50%)❌ - 超范围也不容错：
s: 120%或l: -10%不会自动截断，而是整条丢弃 - React 或 Vue 里用内联样式传
hsl()时，字符串拼接容易漏掉%，比如`hsl(${h}, ${s}, ${l})`没给s和l加%
CSS 文件里给颜色值加了引号
这是 React 项目里高频踩坑点：background: "#fff" 看似合理，实则完全无效——CSS 属性值不是字符串字面量，引号属于语法错误。
- 所有颜色值（
#fff、red、rgb(0,0,0)）都不能加引号，加了就是非法值 - 尤其在 CSS-in-JS 或模板字符串中，容易下意识套双引号，比如
css`color: "${myColor}"`→ 应该去掉引号，写成css`color: ${myColor}` - 开发者工具里表现为整条声明划掉，但新手常以为是变量没传进去，而不是引号问题
最麻烦的不是写错，而是它不报错；最危险的不是无效，而是你盯着 DevTools 里那条带删除线的样式，却以为是选择器权重不够或者继承被覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
