具有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>