Safari 不支持 #rrggbbaa 格式，故需拆分 RGB 与 alpha 变量以确保兼容性；推荐用 rgb()/rgba() 或 hsla() 组合，并统一 alpha 为 0–1 小数。
为什么不能直接在
里写
？
CSS 变量本身支持任意字符串值，
确实能存进去，但问题出在后续使用上：当你把它用在
、
等属性时，浏览器会按“带 alpha 的十六进制”解析——这仅在 CSS Color Module Level 4 中被正式支持，而 Safari（截至 iOS 17 / macOS 14）仍不识别
或
格式。直接赋值会导致 Safari 渲染为不透明黑色或 fallback 失败。
拆成
、
、
和
是最稳的方案
把颜色拆成 RGB 分量 + 透明度，再用
或
函数组合，能 100% 兼容所有现代浏览器（包括旧版 Edge 和 Safari）。关键不是“必须拆”，而是“拆了才能可控地注入 alpha”。
、
、
、
使用时写
需要透明时写
注意：
的 alpha 参数不接受百分比（如
），只认
小数
想复用原生十六进制变量？用
或预处理器更现实
如果你已有
，又不想手动拆 RGB，纯 CSS 目前没标准方法从
动态提取分量。可行路径只有两条：
用
模拟半透效果（Chrome 111+ / Safari 16.4+ 支持，Firefox 尚未支持）
在构建时用 PostCSS、Sass 或 JS 脚本把
预转成
等变量，避免 runtime 解析
放弃“运行时动态改 alpha”，改为定义多档变量：
、
、
，各自对应完整 RGBA 值
别忽略
这条捷径
如果原始色是设计系统里已知的 HSL 值（比如主色是
），直接用
、
、
，再配合
，就能写
。HSL 拆解比 RGB 更直观，且 Safari 对
的兼容性比
更早、更稳。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
真正容易被忽略的是 alpha 值的单位一致性：一旦你在某处用了小数（
），就别在另一处混用百分比（
），否则计算和覆盖会出错。变量命名也建议带上单位提示，比如
而非
。
--color#ff000080#ff000080colorbackground#rrggbbaa#rgba--r--g--b--alphargb()rgba()--primary-r: 255--primary-g: 0--primary-b: 0--primary-alpha: 0.6color: rgb(var(--primary-r), var(--primary-g), var(--primary-b));background: rgba(var(--primary-r), var(--primary-g), var(--primary-b), var(--primary-alpha));rgba()60%0–1color-mix()--primary: #ff0000#hexcolor-mix(in srgb, var(--primary) 60%, transparent)#ff0000--r: 255--primary-100--primary-60--primary-30hsl()hsl(0, 100%, 50%)--primary-h: 0--primary-s: 100%--primary-l: 50%--primary-alphacolor: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-alpha));hsla()rgba()0.440%--alpha-40--alpha-04