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

Question

我有一个标题，当鼠标悬停在上面时，颜色会变得稍微清晰并具有黑色轮廓(我用 4 个文本阴影制作)。

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

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

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