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

【问题标题】：Why does the text-shadow property change the hsla text color?为什么 text-shadow 属性会改变 hsla 文本颜色？
【发布时间】：2016-04-27 05:06:12
【问题描述】：

我有一个标题，当悬停在上面时，颜色会变得稍微清晰并有黑色轮廓（我用 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);
}

为什么会这样？

【问题讨论】：

标签： html css colors hsl

【解决方案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);
}

【讨论】：