F00 能生效是因为 CSS 规范强制将三位十六进制色值（如 #F00）解析为六位（#FF0000），即每个字符复制一次；非重复值（如 #FF5733）不可缩写，否则颜色失真。
#F00 能生效，是因为浏览器在解析时会把它自动展开为 #FF0000——不是“兼容旧写法”，而是 CSS 规范明确定义的解析行为。
三位十六进制怎么被浏览器转成六位？
浏览器看到 #RGB（三位），会把每个字符复制一次，变成 #RRGGBB。这不是猜测或优化，是强制规则：
-
#f06→#ff0066（红=f→ff，绿=0→00，蓝=6→66） -
#3a9→#33aa99（不是#30a090，也不是四舍五入） -
#09c→#0099cc，不是“看起来像蓝就当蓝用”，它就是青蓝色
这个过程发生在 CSS 解析阶段，不依赖 JS、不触发重绘，也无性能损耗。
哪些值能缩写？哪些不能？
缩写只允许在「每对原始值相等」时成立。判断依据不是“人眼觉得接近”，而是十六进制字面是否重复：
- ✅
#336699→ 可缩为#369（33→3，66→6，99→9） - ✅
#000000→ 可缩为#000或#0（浏览器支持单字符，但仅限全零） - ❌
#ff5733→ 不能缩为#f53（ff≠57≠33，展开后是#ff5533，和原色差很远） - ❌
#fae→ 表面看像灰阶，但实际展开为#ffaaee，不是#f0a0e0
工具如 VS Code 插件或 PostCSS 有时会自动“美化”成三位，但若原始设计稿给的是 #ff5733，硬缩会导致颜色偏移，调试时很难发现。
为什么颜色没生效？大概率不是缩写的问题
绝大多数“#f00 不变红”的问题，根源不在色值本身：
- 选择器没匹配上：写了
.btn-primary { color: #f00; }，但 HTML class 是btn-primarys - 被更高优先级规则覆盖：
div p { color: #333; }会盖掉p { color: #f00; } - 属性名拼错：
text-colour（英式）或colour，CSS 只认color - 复制时带了空格或引号：
"#f00"或#f00（末尾空格）→ 浏览器直接忽略整条声明
真正因缩写失效的情况极少，除非你误把非重复值强行缩写，比如把 #ff6600 写成 #f60——它确实会生效，但显示的是 #ff6600 还是 #ff6600？不，它显示的是 #ff6600 展开后的 #ff6600？等等，不对：#f60 展开是 #ff6600，而原值也是 #ff6600，所以刚好撞对。但这是巧合，不是规则。
团队协作中该用三位还是六位？
没有绝对答案，但要注意现实约束：
- 八位 hex（
#RRGGBBAA）不支持 IE 和部分旧版 Safari，如果项目还要兼容，就别用#f008这类写法 - 设计系统里主色若全是灰阶（
#333、#666）或品牌色（#007bff），统一用六位更稳——避免某人手写#07b结果展开成#0077bb，和设计稿偏差 - 压缩工具（如 cssnano）默认保留六位，除非显式开启「convertToShorthand」，且只对可安全缩写的值操作
最常被忽略的一点：缩写节省的那 3 个字符，在 gzip 后几乎为零；而调错一次颜色带来的返工时间，远大于多打两个字母的成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
