为什么 text-shadow 属性会改变 hsla 文本颜色？

Question

我有一个 header，当鼠标悬停在上面时，颜色会变得稍微清晰并具有黑色轮廓（我用 4 text-shadows 制作）。

不过，当我使用 hsla() 定义颜色时，这不起作用。颜色设置为黑色，不透明度为 100%，text-shadows 已关闭。

当我用网络安全颜色（即白色）定义颜色时，一切正常。

我已经发布了一个 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

所以发生的事情是文本阴影不仅仅是一个轮廓，它是再次打印的字符（你可以通过给你的文本阴影疯狂偏移来看到这一点）。因此，尽管您的文本是半透明的，但文本阴影不是，这就是它看起来是黑色的原因。我已经在此处更新了您的 fiddle：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);
}

为什么 text-shadow 属性会改变 hsla 文本颜色？

Why does the text-shadow property change the hsla text color?

html

css

hsl

colors

为什么 text-shadow 属性 会改变 hsla 文本颜色？

Why does the text-shadow property change the hsla text color?

html

css

hsl

colors

为什么 text-shadow 属性会改变 hsla 文本颜色？