text-shadow必须严格按“水平偏移、垂直偏移、模糊半径、颜色”顺序书写,缺一或错序则整条失效;常见失效原因包括overflow:hidden裁剪、文字透明、字体抗锯齿削弱及伪元素未单独设置等。

直接用 text-shadow,别碰 box-shadow —— 后者对文字无效,只会让阴影错位或发虚。
参数顺序写错就完全不生效
text-shadow 对语法顺序极其敏感:必须是「水平偏移、垂直偏移、模糊半径、颜色」,缺一不可地按这个位置写。浏览器不会报错,而是整条声明直接忽略。
-
text-shadow: 2px 2px #000;✅(省略blur-radius,默认为 0) -
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);✅(完整四参数) -
text-shadow: #000 2px 2px;❌(颜色提前,整条失效) -
text-shadow: 2px #000 2px;❌(顺序混乱,无效) -
text-shadow: 2px 2px 0;❌(没颜色,且0后无空格接颜色,等价于未定义)
写了却看不见?先查这四个地方
90% 的“没效果”不是语法问题,而是被意外拦截:
- 父容器设了
overflow: hidden,而阴影(尤其大blur-radius或负偏移)超出边界被裁掉 - 文字颜色是
color: transparent或rgba(0,0,0,0)——text-shadow依赖文字内容作为载体,没颜色就没阴影 - 用了
-webkit-font-smoothing: antialiased,在 macOS Safari 下会显著削弱阴影对比度 - 伪元素(如
::before)里用content插入文字,但忘了给该伪元素单独加text-shadow
中文和小字号要特别小心模糊半径
中文字体笔画密、结构重,盲目套用英文参数容易糊成一团:
- 12px 及以下字体,
blur-radius超过2px就可能发虚;建议控制在1px内 - 标题(≥32px)可用到
6px,但 iOS Safari 对 >12px 渲染不稳定,慎用 - 深色背景配浅色阴影:
text-shadow: 0 0 6px rgba(255,255,255,0.6); - 浅色背景配深色阴影:
text-shadow: 0 0 4px rgba(0,0,0,0.4); - 别用纯黑/纯白——
#000在深底上几乎不可见,#fff在白底上等于没写
真正麻烦的是同一组 text-shadow 值,在 Windows 高分屏和 macOS Retina 屏上视觉重量可能差一倍,得实机多测,不能只看开发机效果。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











