Почему свойство text-shadow меняет цвет текста 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); 
}