带有 rgba 变量的盒子阴影

Question

所以我想要一个带有 Color 变量的盒子阴影。我在这里的 post 上看到 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

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

您需要将您的十六进制颜色 deconstruct/convert 转换成对应的 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>

带有 rgba 变量的盒子阴影

Box-shadow with rgba variable

css

css-variables