Chrome/Firefox 支持 background-color，Safari 忽略 background: linear-gradient() 且不支持 background-image 和 border-radius；::cue 背景仅限扁平色块，需拆解 background 属性并用 track[srclang] 实现多语言差异化。
video::cue 背景样式在 Chrome/Firefox/Safari 中的实际表现差异
Chrome 和 Firefox 对 background-color 支持稳定，但 background: linear-gradient() 在 Safari 中完全被忽略；所有浏览器都不支持 background-image 或 border-radius 作用于 ::cue。这不是写法问题，而是渲染层限制——::cue 的背景始终是扁平色块，且仅通过合成层绘制，无法触发 CSS 渲染管线中的高级特性。
为什么 background-color 生效但 background 不生效？
background 是复合属性，浏览器解析时会尝试展开为 background-image、background-color 等子项。一旦其中任一子项不被支持（如 background-image），整个声明可能被静默丢弃。实操中必须拆开写：
- ✅ 正确：
video::cue { background-color: rgba(0, 0, 0, 0.75); } - ❌ 无效：
video::cue { background: rgba(0, 0, 0, 0.75) url("none"); }（哪怕 url 是占位符） - ⚠️ Safari 特别严格：即使写
background: #000，若未显式指定background-color，部分 iOS 版本会 fallback 到默认透明背景
移动端 Safari 字幕背景的两个隐藏坑
iOS Safari（截至 16.4+）对 ::cue 背景的支持仍不稳定，尤其在首次加载或字体未就绪时：
- 字体加载延迟会导致字幕先以无背景方式渲染 1–2 帧，再突然叠加背景——视觉上像“闪一下”
- 使用
rgba()时，alpha 值低于0.6在 Retina 屏上易出现半透明边缘模糊，建议用0.7起步 - 兜底方案：加一行
video::cue { background-color: #000; }作为 Safari 基础色，再用@supports (background-color: rgba(0,0,0,0.7))包裹增强版本
多语言字幕背景差异化设置的可行路径
不能靠 ::cue[lang="zh"]（伪元素不支持属性选择器），但可通过 track[srclang="zh"]::cue 实现语言级背景控制：
立即学习“前端免费学习笔记（深入）”；
- ✅ 可行：
track[srclang="zh"]::cue { background-color: #2c3e50; } - ✅ 可行：
track[srclang="en"]::cue { background-color: #1a237e; } - ⚠️ 注意：
srclang必须与 WebVTT 文件首行的LANGUAGE: zh或 cue 行中的lang:zh一致，否则匹配失败 - ❌ 无效：
video::cue[lang="zh"]或::cue(lang="zh")—— 这些语法根本不存在于规范中
track.readyState === 2、kind 拼写准确、MIME 类型返回 text/vtt——这些前置条件没满足，::cue 再多兼容写法也白搭。 
