爲什麼文本陰影屬性更改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); 
}