text-shadow是唯一能直接给文字加阴影的CSS属性；常见无效原因包括overflow:hidden裁剪、文字透明、伪元素未单独设置、字体过细小配大模糊、参数顺序错误（须严格为“水平偏移 垂直偏移 模糊半径 颜色”），且深浅背景需不同配色逻辑与三层叠加实现立体感。

text-shadow

是唯一能直接给字幕文字加阴影的 CSS 属性，box-shadow 对文字无效——它只套容器，不作用于字符本身。

为什么 text-shadow 写了却没效果？

最常见不是语法错，而是这些隐性拦截：

• 父容器设了 overflow: hidden，而阴影超出边界被裁掉（尤其字幕常嵌在固定高宽的
  或视频控件里）
• 字幕用了 color: transparent 或 rgba(0,0,0,0) ——text-shadow 依赖文字内容作为载体，没颜色就没阴影
• 用了 ::before/::after 插入字幕文本，但没给伪元素单独加 text-shadow
• 字体太细（font-weight: 200）、字号太小（font-size ），又配了 blur-radius > 2px，结果糊成一团看不清

text-shadow 参数顺序写错就完全失效

必须严格按「水平偏移、垂直偏移、模糊半径、颜色」顺序，缺一不可：

• 前两个值（偏移）哪怕为 0 也得显式写出，单位可省（0 等价于 0px）
• 颜色必须在最后；text-shadow: #000 2px 2px 或 text-shadow: 2px 2px rgba(0,0,0,0.5) 4px 全部无效
• 正确起步写法：text-shadow: 0 2px 4px rgba(0,0,0,0.4)

深色/浅色背景下的配色逻辑完全不同

阴影不是越黑越“重”，而是要让字从背景里“浮出来”：


Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
下载
• 深背景（如视频黑底、#121212）：用浅色高光 + 中灰主影，例 text-shadow: 0 -1px 2px rgba(255,255,255,0.6), 0 2px 4px rgba(0,0,0,0.3)
• 浅背景（如白底弹幕框、#f8f9fa）：用深灰主影 + 略深底影，例 text-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.2)
• 纯黑 #000 在深底上几乎隐形，纯白 #fff 在浅底上等于没写

三层叠加才出可信立体感，别堆多层

单层只能做平面投影；真立体需至少 3 层，模拟统一光源与景深衰减：

• 高光层：0 -1px 1px rgba(255,255,255,0.7)（顶部浅色，小模糊）
• 主影层：1px 1px 2px rgba(0,0,0,0.3)（中灰，适中模糊）
• 深影层：2px 2px 4px rgba(0,0,0,0.2)（深灰，略大模糊）
• iOS Safari 超过 4 层易掉帧，尤其滚动字幕时，3 层最稳
• alpha 值建议递减（0.7 → 0.3 → 0.2），否则像贴纸

真正麻烦的是抗锯齿、深色模式切换、以及字幕动态渲染时机——比如用 JS 插入字幕后才加样式，或 WebVTT 解析延迟导致 text-shadow 初始未生效。这些没法靠一行代码解决，得实机连设备调试。