text-shadow是唯一能按字体笔画轮廓渲染阴影的css属性，它直接作用于字符栅格化像素边缘，严格贴合字形曲线与镂空结构，而filter:drop-shadow()仅基于元素alpha通道矩形轮廓投影。
text-shadow 是唯一能按字体笔画轮廓渲染阴影的 CSS 属性
它不作用于元素盒模型，而是直接作用于每个字符的栅格化像素边缘。这意味着阴影会严格贴合字母“S”的曲线、“A”的三角缺口、“O”的圆环内孔——filter: drop-shadow()做不到这点，它只认 Alpha 通道矩形轮廓，遇到 background-clip: text 或连字（ligature）时容易包住整个文字盒，造成阴影发虚、偏移失真。
多层 text-shadow 可模拟真实光源下的明暗过渡
立体感不是靠“层数多”，而是靠方向、颜色、透明度三者的协同：
- 用负向偏移（如
-2px -2px）模拟左上光源产生的高光 - 用正向偏移（如
1px 1px）叠加一层浅灰硬边，再加rgba(0,0,0,0.2)小模糊模拟柔边投影 - 避免所有阴影都朝同一方向堆叠（比如全写
1px 1px,2px 2px,3px 3px），那样只是变重变糊，没有纵深 - 字号 ≤ 16px 时，
blur-radius超过2px就容易在 Retina 屏上发虚，优先用0或1px配合透明度控制层次
text-shadow 支持逗号分隔的多值语法，而 filter 不支持
text-shadow 单条声明里可写 5 层以上阴影，每层独立控制偏移、模糊、颜色；filter: drop-shadow() 一次只能一个值，想模拟多光源就得套多层 filter，触发多次 GPU 渲染，低端设备易掉帧。
更关键的是：当你需要同时实现「上浮高光 + 下沉投影 + 左侧反光」时，text-shadow 一行就能搞定，比如：
text-shadow: 0 -1px 1px rgba(255,255,255,0.7),
1px 1px 2px rgba(0,0,0,0.2),
-1px 0 1px rgba(0,0,0,0.1);
这种细粒度控制是其他属性无法替代的。
容易被忽略的兼容性与性能陷阱
IE9+ 和所有现代浏览器都支持 text-shadow，但 Safari 对细体字（font-weight: 100/200）加阴影时可能出现渲染异常——这时别硬调 text-shadow，改用 font-weight: 300 提权或换用 filter 替代。
另外，blur-radius 超过 10px 会显著增加渲染负担，Chrome 性能测试显示，模糊值从 2px 拉到 12px 会使文本重绘耗时翻倍。真正需要“霓虹发光”效果时，才考虑大模糊；做立体字，优先靠偏移和颜色渐变，不是靠糊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
