rgb()中r/g/b不能用百分比参与calc()运算，因它们是0–255整数，calc(r 0.8)合法但截断为整数，calc(r 80%)或calc(r - 20%)均静默失效。
rgb() 里 r/g/b 能不能用百分比参与 calc() 运算
不能。在 rgb(from ...) 的 calc() 表达式中，r、g、b 是 0–255 的整数，不是百分比值，也不带单位。写 calc(r * 0.8) 语法合法，但结果会被浏览器截断为整数（比如 255 × 0.8 = 204.0 → 204），且无法表示小数精度；而写 calc(r * 80%) 会直接导致整条声明静默失效。
常见错误现象：
- 把设计稿里“降低 20% 红色分量”理解成
calc(r * 0.8)—— 实际上这是对数值缩放，不是对“强度百分比”的语义操作 - 混用单位：
calc(r - 20%)或calc(r - 20 %)→ 空格位置错、单位非法，整行被忽略 - 误以为
r本身是百分比（如 100% 表示 255），试图写calc(r - 20)来“减 20%”，结果只是减了 20 个数值单位
hsl() 中 s 和 l 的数值范围到底是 0–100 还是 0%–100%
s 和 l 是无单位数值，取值范围是 0–100（不是 0%–100%）。CSS 规范明确要求：在 hsl(from ...) 的 calc() 中，必须写成 calc(s + 10)，不能写 calc(s + 10%) 或 calc(s + 0.1)。
原因在于，from 解构出的 s 和 l 是纯数字（例如 #3b82f6 解构后 l 是 61），不是带百分号的 CSS 百分比值。加单位或换算系数都会破坏类型一致性。
使用场景提醒：
- 调亮 10 个单位：
calc(l + 10)✅ - 调亮 10%（相对原值）：
calc(l * 1.1)✅（前提是原l是数字，乘法结果仍为数字） - 写成
calc(l + 10%)❌ 静默失效 - 写成
calc(l + 0.1)❌ 结果变成 61.1，但浏览器只接受整数或合法百分比，此处不匹配任何通道规则
alpha 通道的 / 后面到底该写小数还是百分比
都可以，/ 0.7 和 / 70% 完全等价，浏览器内部统一转为 0–1 区间的小数处理。但注意：必须用 / 分隔，且前后要有空格。
容易踩的坑：
-
rgb(from red r g b/0.7)→ 缺少空格，整条声明无效 -
rgb(from red r g b /70%)→/后紧贴数字，空格位置错，同样失效 -
hsl(from red h s l / 0.7)✅ 正确格式（/前后各一个空格） - 在
rgb()中改 alpha 时，别误用a变量：rgb(from red r g b a)不合法，rgb()没有a解构变量，只能靠/引入
为什么 calc(l - 10) 有时没效果，但 calc(l * 0.9) 却可以
本质是数值越界检查。HSL 的 l 合法范围是 0–100，calc(l - 10) 如果原始 l 是 5，结果就是 -5 → 浏览器会 clamp 到 0，视觉上可能看不出变化；而 calc(l * 0.9) 只要原始 l > 0，结果就始终 ≥ 0，更大概率落在有效区间内。
更隐蔽的问题：
- 某些颜色（如
black）解构后l是 0，calc(l - 10)永远得 0，永远不变 -
calc(l * 1.5)对l=80得 120 → clamp 到 100，看起来像“到顶了”，不是计算失败 - 没有运行时报错，只能靠 DevTools 检查 computed value 是否被截断
实际调试时，别只看声明是否生效，要打开开发者工具的“Computed”面板，确认最终解析出的 l 值是否符合预期——相对颜色语法的陷阱不在语法报错，而在静默截断和单位混淆。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
