8位十六进制颜色在CSS中写作#RRGGBBAA，前6位为RGB，后2位为alpha通道（00完全透明至FF完全不透明），必须严格8字符、大小写不敏感，仅现代浏览器支持，等价于rgba()但兼容性差。
8位十六进制颜色在CSS中怎么写？
CSS 支持 8 位十六进制颜色（如 #RRGGBBAA），前 6 位是标准 RGB，后 2 位是 alpha 通道（透明度），取值范围是 00（完全透明）到 FF（完全不透明）。它和 rgba() 等价，但更紧凑。
常见错误是误写成 #RGBA（4位）或 #RRGGBBCC（把后两位当其他含义），实际浏览器只认 #RRGGBBAA 这种固定8字符格式。
-
#FF000080表示半透明红色（alpha = 128/255 ≈ 0.5） - 必须写满 8 位，
#F008或#FF00008都无效，会被忽略 - 大小写不敏感，
#ff000080和#FF000080效果一致
和 rgba() 相比有什么区别？
语义等价，但行为细节有差异：8位十六进制是 CSS Color Module Level 4 标准，现代浏览器（Chrome 65+、Firefox 61+、Safari 12+）才支持；而 rgba() 兼容性好得多（IE9+ 就支持）。
性能上无差别，但维护时注意：8位写法无法用预处理器（如 Sass）的 color 函数直接操作 alpha，rgba($color, 0.5) 更灵活。
立即学习“前端免费学习笔记（深入）”；
- 想兼容 IE11？不能用
#RRGGBBAA，得退回rgba()或 opacity - PostCSS / Autoprefixer 不会为
#RRGGBBAA加前缀或降级，需自行判断目标环境 - 设计工具（如 Figma）导出的 CSS 有时默认用 8 位，粘贴到老项目可能“失明”
哪些地方能用 #RRGGBBAA？
所有接受 `color、background-color、border-color、box-shadow 的颜色部分等。但注意：不是所有地方都“显式生效”。
-
background: #00000040✅ 有效（半透黑背景） -
border: 1px solid #0000FF40✅ 有效（半透蓝边框） -
text-shadow: 0 0 4px #FFFFFF80✅ 有效（带透明度的发光） -
fill: #FF000080✅ SVG 内联样式也支持 -
stroke: #RRGGBBAA在 SVG CSS 中同样可用，但某些旧版 SVG 渲染器可能忽略 alpha
容易被忽略的坑
最常被忽视的是 alpha 值换算——它不是百分比，而是十六进制字节。比如想设 30% 透明度（即 70% 不透明），别直接写 30，要算 round(0.7 × 255) = 179 → B3，所以是 #RRGGBBB3。
- 调试时用 DevTools 拾色器看到的可能是
rgb()形式，别误以为原始写法被转换了——它只是显示逻辑 - 如果用了 CSS 变量（
--primary: #007BFF80），在不支持的浏览器里整个声明会失效，变量值不会 fallback - 伪元素
::before的background用 8 位色时，若父元素有opacity，两者会叠加导致意外更透明
真正要用，先查 Can I Use 上的 css-rrggbbaa 支持表；真要兼顾老环境，不如统一用 rgba() 或抽离透明度为独立变量。
