带有 CSS 变量的文本阴影

Question

我对文本阴影属性有疑问。

这有效：

text-shadow: 1px 1px 0 var(--primary-color);

这不起作用：

text-shadow: 1px 1px 0 rgba(var(--primary-color), 0.5);

有谁知道问题是什么？

谢谢你！

Answer 1

--primary-color: #f00;
text-shadow: 1px 1px 0 var(--primary-color);
text-shadow: 1px 1px 0 rgba(var(--primary-color), 0.5);

评估为

text-shadow: 1px 1px 0 #f00;
text-shadow: 1px 1px 0 rgba(#f00, 0.5);

rgba(#f00, 0.5)不是有效的 RGBA 颜色。

相反，你可以这样做：

:root {
  --primary-color: 255, 0, 0;
}

.opaque {
  text-shadow: 1px 1px 0 rgb(var(--primary-color));
}

.translucent {
  text-shadow: 1px 1px 0 rgba(var(--primary-color), 0.5);
}

<div class="opaque">Opaque</div>
<div class="translucent">Translucent</div>