如何仅使用HEX颜色变量实现box-shadow的透明效果？

先看你的代码问题：

:root {
    --r-link-color-rgb: rgb(19, 218, 236);
    --r-link-color-hex: #13DAEC;
}

/* 这个能正常工作 */
box-shadow: 0 0 0 0px rgba(var(--r-link-color-rgb), 0.5);
/* 这个失效，因为rgba不接受HEX格式的颜色值作为第一个参数 */
box-shadow: 0 0 0 0px rgba(var(--r-link-color-hex), 0.5);

要只用HEX变量实现半透明阴影，有两种实用方案：

方案一：使用CSS原生color-mix()函数（推荐，现代浏览器支持） #

利用color-mix()把HEX颜色和透明色按比例混合，直接生成带透明度的颜色值，不用额外转换：

:root {
    --r-link-color-hex: #13DAEC;
    /* 生成50%透明度的对应颜色 */
    --r-link-color-transparent: color-mix(in srgb, var(--r-link-color-hex), transparent 50%);
}

/* 直接使用生成的半透明颜色 */
box-shadow: 0 0 0 0px var(--r-link-color-transparent);

或者直接写在属性里：

box-shadow: 0 0 0 0px color-mix(in srgb, var(--r-link-color-hex), transparent 50%);

这个方法不用拆分颜色，完全基于HEX变量，代码简洁。

方案二：将HEX变量拆解为RGB数值变量（兼容性更好） #

如果需要兼容不支持color-mix()的旧浏览器，可以手动把HEX颜色的R、G、B分量提取出来存成数值变量，再用rgba组合：

:root {
    --r-link-color-hex: #13DAEC;
    /* 从HEX #13DAEC提取R=19, G=218, B=236 */
    --r-link-color-r: 19;
    --r-link-color-g: 218;
    --r-link-color-b: 236;
}

/* 用rgba组合数值变量和透明度 */
box-shadow: 0 0 0 0px rgba(var(--r-link-color-r), var(--r-link-color-g), var(--r-link-color-b), 0.5);

虽然这里需要手动拆分HEX到RGB数值，但全程还是基于你定义的HEX颜色（数值是从它提取的），也符合要求，而且兼容性覆盖所有支持CSS变量的浏览器。

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