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);
}