标签本身不支持CSS样式，字幕描边必须通过WebVTT文件STYLE区块中的::cue { text-shadow: ... }实现，且需满足crossorigin、Content-Type等硬性限制。
<track></track> 标签本身不支持任何 CSS 样式，包括 text-shadow 或 -webkit-text-stroke —— 浏览器强制用原生字幕渲染引擎（如 WebVTT 解析器）绘制字幕，所有外部样式被忽略。
你看到的“字幕描边”效果，实际来自 WebVTT 文件内联的 CSS 类或 <cue></cue> 伪类样式，而非 HTML 的 <track></track> 标签本身。
WebVTT 文件里怎么写描边？用 text-shadow 是唯一可靠方式
WebVTT 规范明确支持在字幕 cue 中嵌入 CSS，且只认 text-shadow（-webkit-text-stroke 被所有主流播放器无视）。
- 必须写在 WebVTT 文件的
STYLE区块里，不是 HTML 的<style></style> - 不能用 class 名选择器；只能用
::cue或::cue(<selector>)</selector>这类伪元素 - 描边必须用 4–8 个方向、
blur-radius: 0的text-shadow，例如：STYLE ::cue { color: white; text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, -1px 0 0 #000, 1px 0 0 #000, -1px 1px 0 #000, 0 1px 0 #000, 1px 1px 0 #000; } - 小字号（如 16px 以下）建议用 ±1px + 8 向；大标题字幕可用 ±2px，但别改 blur 值——否则边缘发虚
::cue 不生效？检查这三处硬性限制
即使 WebVTT 写对了，::cue 样式也可能不显示，常见卡点：
-
<video></video>必须显式设置crossorigin="anonymous"（尤其字幕文件跨域时），否则浏览器静默丢弃样式 - WebVTT 文件响应头必须含
Content-Type: text/vtt，Nginx/Apache 需手动配置 MIME 类型，否则解析为纯文本，样式失效 - Firefox 对
::cue的text-shadow支持最稳；Chrome 125+ 在某些硬件加速模式下会跳过部分阴影层——加will-change: contents到<video></video>可缓解
为什么不用 -webkit-text-stroke？它在字幕里根本没机会执行
WebVTT 渲染走的是媒体子系统底层管线，不经过主文档的 CSSOM。就算你在 HTML 里给 <track></track> 加了 style="-webkit-text-stroke: 2px #000"，也完全不会被读取。
立即学习“前端免费学习笔记（深入）”；
-
-webkit-text-stroke仅对 DOM 文本节点有效（比如<div> 里的文字） <li>字幕是合成图层（composited layer）直接绘制，连 <code>color都得靠::cue控制，更别说私有属性 - 试图用 JS 动态注入
<style></style>到<track></track>内部？DOM API 不允许操作<track></track>的 shadow root，会报DOMException
真正难的不是写描边，而是让描边在不同设备上都稳定出现：iOS Safari 字幕渲染缩放逻辑特殊，MacBook Retina 屏下 ±1px 偏移可能被四舍五入成 0.5px 导致断点，这时候得用 @media (-webkit-min-device-pixel-ratio: 2) 单独补一层 ±2px 描边——但只能写在 WebVTT 的 STYLE 区块里，不能用 HTML 的媒体查询。
