CSS中text-shadow不生效如何解决？尝试drop-shadow仍无效

你的问题核心是text-shadow的语法错误，标准text-shadow的参数格式为：
text-shadow: 水平偏移 垂直偏移 [模糊半径] [颜色];
你写了4个长度值（8px 12px 0px 0px），多出来的第四个值是box-shadow专属的「扩展半径」，text-shadow并不支持这个参数，浏览器会直接忽略整个无效的样式声明，这就是样式没应用到元素上的原因。

修正后的代码 #

CSS

.text-shadow {
  /* 移除多余的扩展半径值，保留合法参数组合 */
  text-shadow: 8px 12px 0px rgba(0, 0, 0, 0.5);
}

HTML

<h1 class="text-shadow">hallo</h1>

关于filter: drop-shadow的问题 #

如果想用drop-shadow滤镜实现类似效果，它的语法是filter: drop-shadow(水平偏移 垂直偏移 模糊半径 颜色)，同样不能加多余的扩展半径参数，正确写法示例：

.text-shadow {
  filter: drop-shadow(8px 12px 0px rgba(0, 0, 0, 0.5));
}

你之前用drop-shadow无效也是因为参数数量错误，而blur滤镜仅需一个模糊值，语法简单，所以能正常工作。

内容的提问来源于stack exchange，提问作者rich-ad