为什么文本阴影属性更改hsla文本颜色？

Question

我有一个标题，当悬停时，颜色变得稍微清晰，并有一个黑色轮廓（我用4个文字阴影）。

虽然，当我使用hsla（）来定义颜色时，这不起作用。颜色设置为黑色，100％不透明，文字阴影关闭。

当我用websafe颜色（即白色）定义颜色时，一切正常。

我已经发布了的jsfiddle显示的问题，并证明有什么错我的语法（据我可以告诉）：https://jsfiddle.net/TheInternetIO/Lxj12uje/3/ 和我的CSS（对这个问题的情况下）：

h2:hover{ 
text-shadow: 
-1px -1px 0 #000, 
    1px -1px 0 #000, 
    -1px 1px 0 #000, 
    1px 1px 0 #000; 
color: hsla(0, 0%, 0%, .2); 
} 

这是怎么发生的？

Answer 1

所以发生的事情是，文字阴影不仅仅是一个轮廓，它是再次打印的字符（你可以通过给你的文字 - 影子疯狂的偏移看到这一点）。所以虽然你的文字是半透明的，但文字阴影却不是，这就是为什么它看起来很黑。我在这里更新了你的小提琴：https://jsfiddle.net/Lxj12uje/5/为文本阴影颜色添加透明度，我认为你会得到你要找的效果。作为参考，我所做的更改如下：

h2:hover{ 
    text-shadow: 
    -1px -1px 0 hsla(0, 0%, 0%, .2), 
     1px -1px 0 hsla(0, 0%, 0%, .2), 
     -1px 1px 0 hsla(0, 0%, 0%, .2), 
     1px 1px 0 hsla(0, 0%, 0%, .2); 
    color: hsla(0, 0%, 0%, .2); 
}