三位缩写是严格基于字符重复性的语法糖，仅当#rrggbb中每对十六进制字符完全相同时（如#ff6600→#f60）才合法；否则浏览器直接丢弃该声明，而非降级处理。
三位缩写不是“省字数的技巧”，而是有严格数学前提的语法糖；写错会直接让颜色失效，而不是变淡或偏色。
哪些#RRGGBB能缩成#RGB
必须同时满足：红色两位相同、绿色两位相同、蓝色两位相同。不看数值大小，只看字符是否重复。
- #ff6600 → ✅ 可缩为
#f60（ff→f，66→6，00→0） - #33aa99 → ✅ 可缩为
#3a9（注意不是#39a，顺序不能乱） - #ffcc01 → ❌ 不能缩为
#fc1，因为01≠00且≠11，浏览器会整个丢弃该声明 - #123456 → ❌
12、34、56全不重复，无效缩写
浏览器怎么解析#f06这类三位值
不是“高位填充”或“补零”，就是简单复制每位一次：第一位变RR，第二位变GG，第三位变BB。这个规则由 CSS Color Module Level 4 固定，所有现代浏览器完全一致。
-
#f06→ 展开为#ff0066（红=255，绿=0，蓝=102） -
#abc→ 展开为#aabbcc（红=170，绿=187，蓝=204） -
#999≠#909090，而是#999999（有人误以为是“补零”，实际是复制）
CSS里哪些地方容易写错#开头的颜色
看似简单，但几个常见位置一写错就静默失效，连报错都不会有。
- 漏掉
#前缀：ff0000在任何CSS属性中都无效，浏览器直接跳过整条声明 - 混进函数参数：
color: rgba(<code>#000, 0.5) → 语法错误，rgba()要的是数字，不是字符串 - 多写一位：
#ff00000（七位）或#ff000g（含非法字符）→ 整个值被忽略，回退到继承色或默认色 - 空格或引号残留：从设计稿复制时带了前后空格或英文引号，如
"#333"或#333→ 无效
三位简写在真实项目里要不要用
它节省不了多少体积，但可能增加维护成本。关键看团队是否真需要它。
- 压缩工具（如 cssnano）默认会把可简写的六位转三位，你不用手写也能得到同样效果
- DevTools 的 computed 面板永远显示六位格式，源码写
#fff和#ffffff在调试时看不出区别 - 人工审查色值一致性时，
#333和#333333看起来像两个东西，其实一样——这种视觉干扰容易引发误判 - 可访问性检测工具读的是 computed color，不受写法影响；但设计系统文档若混用两种写法，开发比对色卡时会多一层转换脑力
最常被忽略的一点：三位缩写只关乎字符重复性，和颜色语义无关。#fae 是 #FFAAEE，不是“浅粉色”或“某种品牌色”——它只是恰好能缩而已。别靠感觉缩，得靠肉眼或工具确认每对字符是否真的一样。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
