text-shadow语法必须按“水平偏移、垂直偏移、模糊半径、颜色”严格顺序书写，至少前三值不可省；多层需逗号分隔，绘制顺序从左到右；Retina屏发虚应改用rem/em单位或媒体查询适配；IE9+仅支持单层无模糊rgba色值。
text-shadow语法到底怎么写才不糊
浏览器对 text-shadow 的解析是严格按顺序的：水平偏移、垂直偏移、模糊半径、颜色。漏掉模糊半径或写成负数，阴影就直接消失或错位。
- 必须至少写前三个值（
text-shadow: 2px 2px 4px #000;），只写两个（如2px 2px #000）在旧版 Safari 会失效 - 模糊半径为
0是合法的，此时是清晰锐利的投影，适合做“描边”效果；但设成负数（如-1px）会被忽略 - 颜色不写默认是当前文字色，但不推荐依赖这个行为——不同浏览器渲染略有差异，显式声明更稳
做立体字效果时为什么总像贴纸而不是浮起来
真正有立体感的关键不是加一层阴影，而是模拟光源方向下的多层叠加：上亮下暗，或左亮右暗。单层 text-shadow 只能投一个影子，得用逗号分隔写多组。
- 典型双层立体写法：
text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333;—— 前者是高光，后者是暗部，注意模糊半径都为0才够硬朗 - 如果加了模糊（比如
1px 1px 2px #000），边缘会发虚，立体变“毛玻璃”，适合柔和标题，不适合按钮或 logo - 别用太多层：Chrome 对单个
text-shadow的层数没硬限制，但超过 4 层后渲染性能明显下降，移动端尤其卡
text-shadow在Retina屏上发虚怎么办
根本原因是模糊半径单位用了 px，而高清屏物理像素密度翻倍，CSS 像素和设备像素不匹配，导致抗锯齿算法拉胯。
- 优先改用
rem或em单位（如text-shadow: 0.1rem 0.1rem 0.2rem #000;），让缩放更可控 - 如果必须用像素，且只针对高清屏优化，可用媒体查询隔离：
@media (-webkit-min-device-pixel-ratio: 2) { .title { text-shadow: 1px 1px 1px #000; } } - 别试图用
transform: scale(0.5)缩小再放大来“修复”——这会让整个文本重绘，阴影更糊，还可能触发字体回退
IE 和老版 Edge 对text-shadow的支持有多坑
IE9+ 支持基础 text-shadow，但仅限单层、无模糊、颜色必须带 alpha 通道（rgba() 或 hsla()）才肯渲染；IE8 及以下完全无视，连降级都不提示。
立即学习“前端免费学习笔记（深入）”；
- 别指望
filter: dropshadow()替代——它只在 IE5.5–IE9 有效，且不支持多层、不遵循标准光源逻辑，边缘锯齿严重 - 真要兼容 IE8，得用 SVG 文本或伪元素 +
box-shadow模拟，但那是另一套方案，text-shadow本身无法优雅降级 - 现代项目若还需支持 IE11，注意它不支持
text-shadow中的inset关键字（虽然规范里压根没这玩意儿，但有人误试）
最常被跳过的细节是：多层 text-shadow 的绘制顺序是从左到右，后写的在上层。调反高光和暗部顺序，立体感就彻底翻车。
