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

具有 CSS 变量的文本阴影

Text Shadow with CSS Variable

css

alpha

shadow

rgba

css-variables