带有 CSS 变量的文本阴影答案

【问题标题】：Text Shadow with CSS Variable带有 CSS 变量的文本阴影
【发布时间】：2019-02-27 13:57:05
【问题描述】：

文本阴影属性有问题。

这行得通：

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

这不起作用：

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

有谁知道问题出在哪里？

谢谢！

【问题讨论】：

如果第一个有效，肯定它包含rbg，所以在第二种情况下你将有一个嵌套的rgb，因此它是无效的
color-mod 可能是这个w3.org/TR/css-color-4/#modifying-colors 的用例
变量css是十六进制代码：--primary-color: #f00
所以rgba(#f00,0.5)也无效
@adrigm 不是。只有使用 color-mod 才能实现

标签： css shadow alpha rgba css-variables

【解决方案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>

【讨论】：