css - 带有 rgba 变量的盒子阴影

Question

所以我想要一个带有 Color 变量的盒子阴影。我在这里的帖子上看到 rgba(var(--card-border-color),0.75); 工作正常，但将它放在 box-shadow 属性中会破坏它。所以这不起作用:

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);

我该如何解决这个问题？

Answer 1

如果满足以下条件，您的代码应该可以正常工作:注入(inject)变量后，您的颜色属性是一个有效的 CSS 值。例如，当您使用十六进制代码时，这会插入到 rgba(#040914, 0.33)。这不是有效的 CSS — 根据我的评论，它是有效的 SCSS，因为解析器会将其转换为有效的 CSS RGBA 颜色字符串。

您需要将十六进制颜色解构/转换为对应的 RGBA 颜色，这样它才能工作，这样它就会插值成类似 rgba(4, 9, 20, 0.33) 的颜色。这是通过做:

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

请参阅下面的概念验证:

.box {
  --card-shadow-color: 4, 9, 20; /* RGB equivalent of #040914 */
  
  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);
    
  /* Presentational styles */
  width: 100px;
  height: 100px;
  margin: 50px auto;
  border: 1px solid rgba(var(--card-shadow-color), 0.1);
}

<div class="box"></div>