嘿！最近我探究了一下视频字幕的样式，发觉能够用 CSS 的 `::cue` 当前这个东西来搞定。听起来有点较高较深莫测，但其实挺简洁的。咱们今天就来聊聊当前这个话题。 哪些是 CSS ::cue？ 先来看要说的是`::cue` 是 CSS 中一个伪元素。它最主要用来控制视频中 WebVTT 字幕的体现方式。WebVTT 就是一种格式，专门用来存储视频字幕的信息。你能够把它想象成一个文本文件，里面包含了视频的时间段戳和对应的字幕文本。 简洁来说： 你把文字写在 WebVTT 文件里； 你用 CSS 的 `::cue` 来告诉浏览器怎么体现这一些文字，歇了吧...。 直接作用于全部字幕 `video::cue` 能够直接作用于 `video` 当前这个元素本身。 这意味着你能够设置全部视频中的全部字幕的颜色、字体、背景等等外观。 针对特定字幕内容定制 当前咱们来聊聊怎样针对不同的字幕内容进行定制。 如果你的 WebVTT 文件中采用了类名 ， 比如 `十分沉关键内容` ，那么你就能够通过 `::cue` 来单独设置当前这个类的字幕的样式。 CSS 设置那一些较小细节 `video::cue` 能够控制很更多细节哦！比如：，研究研究。 颜色： 能够设置字体的颜色 字体： 能够设置字体的类型 较大较小： 能够设置字体的尺寸 背景： 能够设置字体的背景色 位置： 虽然不是直接控制位置，但能够通过一些技巧让文字看起来更美观 注意事项与兼容性 `::cue` 在主流浏览器中支持得还不错，但是有些老版本的浏览器有可能不支持或者兼容性不良好。所以你要根据你采用的浏览器来调整你的 CSS 代码。 进阶玩法：给特定内容加亮 采用 `.highlight` 类 为了让沉重点信息更醒目一些，我们能够给特定的字幕添加一个特殊的类名 `.highlight` 。 然后在 CSS 中采用 `video::cue` 来设置 `.highlight` 类下的字幕的样式。 This is important! 效果怎么样呢？ //这是一个十分沉关键的信息！ 一下，不是我唱反调...