rgba()透明度必须用0–1小数而非百分比，如rgba(255,0,0,0.5)；hsl()中s/l需带%，h可省略deg；#fff与#ffffff性能无差异但推荐六位；color()宽色域语法兼容性差，需手动fallback。
rgb() 和 rgba() 的透明度参数为什么不能写百分比
因为 CSS 规范里 rgba() 第四个参数明确要求是 0–1 的数字，不是百分比。写成 rgba(0, 0, 0, 50%) 会直接失效，浏览器当无效声明丢弃。
常见错误现象：background-color: rgba(255, 0, 0, 50%) 看起来没透明效果，实际渲染成不透明红色；DevTools 里该行被划掉（invalid）。
- 必须写成
rgba(255, 0, 0, 0.5)，小数点后位数不限，0.5、0.50、.5都合法 - 如果从设计稿拿到的是「50% 透明度」，别下意识填
50%，要换算成0.5 - 注意和
hsla()保持一致——它的 alpha 参数也是 0–1，不是百分比
十六进制颜色写 #fff 和 #ffffff 有性能差异吗
没有。解析和渲染层面完全等价，现代浏览器对两种写法都做了优化，连内存占用都一样。
但可维护性差别明显：团队协作中混用 #fff 和 #ffffff 会让代码审查变麻烦，尤其在颜色值参与自动化处理（比如 PostCSS 插件、主题生成脚本）时，正则或 AST 解析容易漏匹配短格式。
立即学习“前端免费学习笔记（深入）”；
- 推荐统一用六位：写
#ffffff而非#fff，避免后续加透明通道时出错（比如想改成#ffffff80，但原先是#fff就得先补零） - CSS-in-JS 或构建工具里若自动压缩颜色，一般默认转成短格式，需确认是否影响你的颜色提取逻辑
- Alpha 扩展色（如
#rrggbbaa）只支持八位写法，#fff8不合法，必须是#ffffff80
hsl() 里的 h、s、l 参数单位和取值范围容易搞混
h 是角度，单位是 deg（可省略），范围 0–360；s 和 l 是百分比，必须带 % 符号。写错单位会导致整个函数无效。
典型翻车现场：hsl(240, 100, 50) 渲染成默认文本色（即声明被忽略），因为 s 和 l 缺少 %；或者写成 hsl(240deg, 100%, 50)，最后一个没 % 同样失效。
- 记住口诀：“h 是角度，s 和 l 是百分比”——只有 h 可以省略单位，其他两个必须写
% - 使用场景：调节主题色明暗时，
hsl(200, 100%, 60%)改成hsl(200, 100%, 40%)比调rgb()直观得多 - 兼容性没问题，所有现代浏览器都支持，但 IE9 及更早版本不支持
hsl()，如果还要兼容，得配 fallback
color() 函数还没法在生产环境放心用
color() 是 CSS Color Module Level 4 的新语法，支持指定色彩空间（如 color(display-p3 0.1 0.8 0.3)），但目前仅 Chrome 111+ 和 Safari 16.4+ 支持，Firefox 完全没动静，而且不支持任何降级机制。
你写 color(display-p3 0.1 0.8 0.3)，旧浏览器直接跳过，不会 fallback 到前一个声明（除非手动写两遍）。
- 当前稳妥做法：用
color()前必须叠加传统色值，例如background-color: #00ff00; background-color: color(display-p3 0 1 0); - 它和
rgb()的区别不只是语法——color()能真正利用宽色域屏幕，但普通 sRGB 下看不出差异 - 构建工具（如 PostCSS）基本不处理
color()，没法自动加 prefix 或 fallback，得手写
宽色域支持这事，现在还卡在「能用」和「敢用」之间，真要上，得盯着 CanIUse 数据，且做好视觉回归测试。
