Chrome浏览器中CSS text-shadow文字阴影属性不显示问题求助

问题原因 #

• text-shadow属性存在多处语法错误，导致浏览器无法正常解析属性：
  1. 0%、100%关键帧的第一个阴影参数错误在模糊半径和颜色之间多写了逗号，写成0 0 10px, #00b3ff，不符合水平偏移 垂直偏移 模糊半径 颜色的属性语法要求。
  2. 0%、100%关键帧的最后一个阴影值末尾多写了多余逗号，导致整个属性校验失败。
  3. 5%、95%关键帧的text-shadow写法0 0 10px none不符合规范，且末尾也多写了多余逗号，属性无法生效。
• 额外冗余问题：HTML中仅存在5个对应字母的<span>标签，CSS中写的第6到第8个nth-child选择器无对应元素，第8个的11.75s动画延迟也属于笔误，但该问题不影响阴影属性本身生效。

解决方法 #

修正CSS中@keyframes animate的代码即可，修正后的完整关键帧代码如下：

@keyframes animate{
    0%,100%{
        color: #fff;
        filter: blur(2px);
        text-shadow: 0 0 10px #00b3ff,
                     0 0 20px #00b3ff,
                     0 0 40px #00b3ff,
                     0 0 80px #00b3ff,
                     0 0 120px #00b3ff,
                     0 0 200px #00b3ff,
                     0 0 300px #00b3ff,
                     0 0 400px #00b3ff;
    }
    5%,95%{
        color: #111;
        filter: blur(0px);
        text-shadow: none;
    }
}

同时可以删除CSS中h1 span:nth-child(6)到h1 span:nth-child(8)的冗余规则，避免无效代码。

内容的提问来源于stack exchange，提问作者Parthhindustani Gamer