rgb()和hsl()末尾加/是css color level 4标准语法，用于空格分隔颜色值与alpha通道（如rgb(255 0 0 / 0.5)），语义清晰且现代浏览器已稳定支持，但需避免混用逗号、确保hsl()饱和度明度带%单位，并注意ie及旧版webview不兼容。
rgb() 和 hsl() 末尾加 / 是标准写法
CSS Color Level 4 正式支持在 rgb() 和 hsl() 函数末尾用 / 分隔 alpha 值，这是目前最简洁、语义最清晰的写法。它不是“技巧”，而是现代浏览器（Chrome 99+、Firefox 95+、Safari 15.4+）已稳定实现的标准语法。
常见错误是混用逗号和斜杠，比如 rgb(255, 0, 0 / 0.4) —— 这会解析失败，因为逗号语法不接受 /；正确写法必须是空格分隔：rgb(255 0 0 / 0.4) 或 hsl(240 100% 50% / 0.6)。
-
rgb()中三个数值间用空格，/后直接跟 alpha（小数或百分比，如0.4或40%） -
hsl()的饱和度和明度必须带%单位，alpha 同样支持小数或百分比 - 旧式写法
rgba(255, 0, 0, 0.4)和hsla(240, 100%, 50%, 0.4)仍可用，但冗余且不易读 - IE 和部分旧 WebView 不支持斜杠语法，若需兼容，只能退回四参数逗号形式
#RRGGBBAA 十六进制透明色怎么算对？
#RRGGBBAA 是 Color Level 4 另一标准语法，最后两位 AA 是 alpha 值（十六进制），不是百分比也不是小数。很多人写成 #ff000050 以为是 50% 透明，实际是 ≈31%，因为 50（十六进制）= 80（十进制），80/255 ≈ 0.31。
真正要表达 50% 透明度，得换算：255 × 0.5 = 127.5 → 取整 127 → 十六进制为 7F，所以半透明红色应写 #ff00007F。
-
FF= 100% 不透明（等价于省略 alpha 的#RRGGBB） -
80≈ 50% 透明（128/255） -
CC≈ 20% 透明（204/255） -
00= 完全透明（内容不可见） - 务必搭配降级写法，例如：
background-color: rgba(255, 0, 0, 0.5); background-color: #ff00007F;
为什么 opacity 和 rgb()/hsl() 加 / 效果完全不同？
opacity: 0.5 会让整个元素及其所有子元素变透明，包括文字、边框、阴影；而 rgb(255 0 0 / 0.5) 只影响该颜色值所在的属性（比如只让背景变半透，文字依然 100% 清晰）。
这俩根本不是替代关系，是不同作用域的工具。选错会导致布局“糊掉”或文字看不清——尤其当容器里有按钮、图标、嵌套文本时。
- 想控制整体可见性（比如模态框淡入）→ 用
opacity - 只想让背景/边框/文字颜色带透明，不影响其他内容 → 用
rgb()或hsl()斜杠语法 -
filter: opacity(0.5)行为类似opacity，但不会触发重排，且不继承给子元素（注意：仍会影响子元素渲染效果，只是不继承 CSS 属性）
Tailwind 中的 bg-blue-500/30 是怎么工作的？
Tailwind v3.0+ 的斜杠语法本质就是把 bg-blue-500/30 编译成 background-color: rgb(59 130 246 / 0.3)，完全依赖 CSS Color Level 4 的函数式颜色语法。它只对颜色类生效，且仅限 color、background-color、border-color 等明确接收颜色值的属性。
写 shadow-lg/30 或 from-blue-500/30 在 v3.2 及更早版本中会被静默忽略——Tailwind 解析器根本不认识这种组合，也不会报错。
- v3.3+ 才开始支持渐变色标单独加斜杠，如
from-blue-500/30 to-white/20 - 非颜色类（如
shadow、ring、divide）加斜杠无效，别试 - 自定义颜色（如
bg-[#ff0000]/20）也支持，前提是 PostCSS 插件启用tailwindcss/nesting或使用最新版构建工具
% 单位、是不是误用在非颜色属性上。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
