text-shadow 必须严格按 h-offset v-offset blur-radius color 顺序书写，缺一不可，否则整条声明被浏览器静默忽略；常见错误包括颜色前置、参数错位、漏单位等。
text-shadow 必须写成 h-offset v-offset blur-radius color 顺序，缺一不可；写错位置整条声明被浏览器静默忽略，不报错也不渲染。
text-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后没空格接颜色，等价于未定义）
写了 text-shadow 却看不见？先查这四个地方
90% 的“没效果”不是语法问题，而是被渲染链路中的某个环节拦截了：
- 父容器设了
overflow: hidden，而阴影（尤其大blur-radius或负偏移）超出边界被裁掉 - 文字本身是
color: transparent或rgba(0,0,0,0)——text-shadow依赖文字内容作为载体，没内容就没阴影 - 用了
-webkit-font-smoothing: antialiased，在 macOS Safari 下会显著削弱阴影对比度 - 伪元素（如
::before）里用content插入文字，但忘了给该伪元素单独加text-shadow
中文和小字号文字的模糊半径要特别小心
中文字体笔画密、结构重，盲目套用英文参数容易糊成一团，这不是 bug，是像素渲染原理决定的：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 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在白底上等于没写
多重阴影叠加时图层顺序是“前下后上”
多组值用逗号分隔，但渲染顺序和 Photoshop 图层相反：前面的在下层，后面的在上层。这点直接影响浮雕、发光、描边等效果是否成立：
- 浮雕效果靠上下两层反向阴影：
text-shadow: 1px 1px 0 #fff, -1px -1px 0 #000;（先白后黑，白在下、黑在上才显浮起） - 外发光常用递增模糊：
text-shadow: 0 0 4px #fff, 0 0 8px #fff;（后一层更虚，盖在前一层上） - 空心描边需文字透明 + 多向实边：
color: transparent; text-shadow: 0 0 2px black, 1px 1px 2px black, -1px -1px 2px black; - 用四方向
0模糊模拟描边比单层大模糊更清晰：text-shadow: -1px 0 0 #000, 0 1px 0 #000, 1px 0 0 #000, 0 -1px 0 #000;
真正麻烦的是同一组 text-shadow 值，在 Windows 高分屏和 macOS Retina 屏上视觉重量可能差一倍——抗锯齿策略、子像素渲染、DPI 缩放都会改变最终像素表现，调试时必须真机预览，不能只信开发机效果。
