Css 带有rgba变量的长方体阴影

所以我想要一个有颜色变量的盒子阴影。我在这里的帖子上看到，

rgba（var（-card border color）），0.75工作正常，但将其置于框阴影属性中会破坏它。所以这不起作用：

box-shadow: 0px 0.46rem 2.18rem rgba(var(--card-shadow-color), 0.03),
    0px 0.93rem 1.4rem rgba(var(--card-shadow-color), 0.03),
    0px 0.25rem 0.53rem rgba(var(--card-shadow-color), 0.05),
    0px 0.12rem 0.18rem rgba(var(--card-shadow-color), 0.03);

如何解决这个问题？
如果满足以下条件，您的代码应该可以正常工作：在注入变量后，您的颜色属性是有效的CSS值。例如，当您使用十六进制代码时，这将插入到
rgba（#040914，0.33）
。根据我的评论，这不是有效的CSS，但它是有效的SCS，因为解析器会将其转换为有效的CSS RGBA颜色字符串

你需要的是解构/转换你的十六进制颜色为它的RGBA对应物，这样它就可以插值到类似于
RGBA（4,9,20,0.33）
。这是通过以下方式实现的：

--card-shadow-color: 4, 9, 20;

见下面的概念证明：


.box{
--卡片阴影颜色：4,9,20；/*RGB相当于#040914*/
盒子阴影：0px 0.46rem 2.18rem rgba（var（--卡片阴影颜色），0.03），
0px 0.93rem 1.4rem rgba（var（--卡阴影颜色），0.03），
0px 0.25rem 0.53rem rgba（var（--卡阴影颜色），0.05），
0px 0.12rem 0.18rem rgba（var（--卡阴影颜色），0.03）；
/*表现风格*/
宽度：100px；
高度：100px；
保证金：50px自动；
边框：1px实心rgba（var（--卡片阴影颜色），0.1）；
}
如果满足以下条件，您的代码应该工作正常：注入变量后，您的颜色属性是有效的CSS值。例如，当您使用十六进制代码时，这将插入到
rgba（#040914，0.33）
。根据我的评论，这不是有效的CSS，但它是有效的SCS，因为解析器会将其转换为有效的CSS RGBA颜色字符串

你需要的是解构/转换你的十六进制颜色为它的RGBA对应物，这样它就可以插值到类似于
RGBA（4,9,20,0.33）
。这是通过以下方式实现的：

--card-shadow-color: 4, 9, 20;

见下面的概念证明：


.box{
--卡片阴影颜色：4,9,20；/*RGB相当于#040914*/
盒子阴影：0px 0.46rem 2.18rem rgba（var（--卡片阴影颜色），0.03），
0px 0.93rem 1.4rem rgba（var（--卡阴影颜色），0.03），
0px 0.25rem 0.53rem rgba（var（--卡阴影颜色），0.05），
0px 0.12rem 0.18rem rgba（var（--卡阴影颜色），0.03）；
/*表现风格*/
宽度：100px；
高度：100px；
保证金：50px自动；
边框：1px实心rgba（var（--卡片阴影颜色），0.1）；
}
您将
--卡阴影颜色设置为什么值？当我使用
--卡片阴影低颜色：0,0,0作为概念证明，它是有效的。参见
——卡片阴影颜色：#040914您不能：这不受支持，因为例如
rgba（#040914，0.33）
不是有效的CSS值（但它被SCSS解析为有效的CSS）。您需要将十六进制代码转换为其rgba组件。您将
--卡阴影颜色设置为什么值？当我使用
--卡片阴影低颜色：0,0,0作为概念证明，它是有效的。参见
——卡片阴影颜色：#040914您不能：这不受支持，因为例如
rgba（#040914，0.33）
不是有效的CSS值（但它被SCSS解析为有效的CSS）。您需要将十六进制代码转换为其rgba组件。