现代浏览器支持 rgb()/hsl() 的 / 语法替代 rgba()/hsla()，如 rgb(255 0 0 / 0.4)；八位 hex（如 #ff6b6b80）须全小写无空格；transparent 是关键字，不支持 alpha 调节。
用 rgb() 和 hsl() 的 / 语法替代 rgba() 和 hsla()
现代浏览器（Chrome 111+、Firefox 109+、Safari 16.4+、Edge 111+）已原生支持在 rgb() 和 hsl() 后直接加 / alpha，无需前缀、不依赖 polyfill。这是目前最干净的无前缀透明色写法。
常见错误是仍写 rgba(255, 0, 0, 0.4) 或 hsla(0, 100%, 50%, 0.6) —— 这些虽能用，但属于旧式函数名，不是“无前缀原生语法”的演进方向。
-
rgb(255 0 0 / 0.4)✅ 空格分隔，/后直接跟小数或百分比（如/ 40%） -
hsl(240 100% 50% / 0.6)✅ 明度单位必须带%，否则解析失败 -
rgb(255, 0, 0 / 0.4)❌ 逗号 +/混用，整条声明被忽略 -
rgb(255 0 0 / 50%)✅ 等价于/ 0.5，但更直观
#RRGGBBAA 八位十六进制必须严格小写无空格无引号
八位 HEX 是真正的无前缀原生语法，但浏览器校验极严：错一位、大写、加空格或引号，就静默失效——不报错，也不渲染，你只会发现“颜色没变”。
-
#ff6b6b80✅ 8 字符、全小写、连续无分隔 -
"#ff6b6b80"❌ 引号让 CSS 解析器当字符串字面量处理，color: var(--primary)直接失败 -
#ff6b6b 80❌ 空格中断解析，整条声明被跳过 -
#FF6B6B80❌ 大写不符合规范，部分旧 WebView（如 Android 10 系统 WebView）会拒绝解析
别把 transparent 当作“带透明度的颜色”来用
transparent 是关键字，表示完全透明的固定值，它没有 alpha 可调，也不能参与颜色计算（比如 color-mix() 或 color-contrast()）。它只适合明确需要“全透”的场景，比如清空默认背景。
-
background-color: transparent;✅ 安全兜底，兼容所有浏览器 -
color: transparent;✅ 常用于配合background-clip: text实现镂空文字 -
border-color: transparent;✅ 隐藏边框但保留占位空间 -
color: transparent / 0.5;❌ 语法错误，transparent不支持/语法
alpha 值换算容易翻车：十六进制 AA ≠ 百分比
八位 HEX 中的后两位 AA 是十六进制数，对应十进制 0–255，代表**不透明度**（不是“透明度”），00 = 全透，FF = 全不透。直接把 0.5 写成 50 是典型错误——50 是十六进制，等于十进制 80，实际不透明度仅 ≈ 31%。
- 50% 不透明度 → 十进制 127.5 → 取整 127 → 十六进制
7f（不是80） - 常用值建议硬记：
ff（不透）、cc（≈20% 透）、99（≈40% 透）、7f（≈50% 透）、33（≈80% 透）、00（全透） -
rgb(0 0 0 / 0.5)和#0000007f是等效的，但前者可读性高、后者压缩率高
真正难的不是写对语法，而是记住：八位 HEX 的容错率为零，/ 语法对空格和单位敏感，而 transparent 根本不是“颜色”。一旦混用或误算，浏览器不会警告，只会沉默丢弃整条规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
