如何为CSS变量颜色添加透明度？已尝试方法无效求解决方案

你的问题出在rgba()函数无法直接解析十六进制格式的CSS变量，它需要的是0-255的RGB数值参数。以下是两种可行的解决办法：

方法一：将CSS变量改为RGB数值格式 #

把原来的十六进制颜色值转换成RGB数值（#b8b8c4对应184, 184, 196），重新定义变量：

--border-color: 184, 184, 196;

之后就可以直接在rgba()里使用变量，同时如果需要原不透明颜色，用rgb(var(--border-color))即可：

/* 半透明边框 */
border: 1px solid rgba(var(--border-color), 0.5);
/* 原不透明颜色 */
background-color: rgb(var(--border-color));

方法二：使用color-mix函数（无需修改原变量） #

如果不想改动已定义的十六进制变量，可以用CSS的color-mix函数直接混合原颜色和透明色，实现半透明效果：

--border-color: #b8b8c4;
/* 混合50%透明，得到半透明边框 */
border: 1px solid color-mix(in srgb, var(--border-color), transparent 50%);

这个方法兼容性较好，现代主流浏览器都支持。

内容的提问来源于stack exchange，提问作者user16716393