字幕也能写 CSS：从一个预设开始，改成你想要的样子

字幕应该配合你的观看方式

以前，字幕样式可以调整字体、大小、粗细、颜色和背景透明度。日常观看已经够用，但双语字幕还有更多用法，是几个滑块覆盖不到的。

练听力时，你可能想先把译文藏起来，需要时再看；视线总被原文吸走时，可以把原文弱化；画面本身很复杂时，也许需要更明显的背景、更宽松的间距，或一点帮助定位当前字幕的动效。

从陪读蛙 1.46.5 开始，视频字幕样式支持自定义 CSS。它和原来的样式选项放在一起，提供实时预览和三个现成预设：可以先点一下得到可用效果，再决定要不要继续改代码。

先从预设开始

打开预设菜单，选择最接近你需求的效果：

预设会把普通 CSS 追加到编辑器里，不会把你锁进某种模式。应用后，每个数值都能继续修改；预设之间也可以叠加，比如同时模糊译文并弱化原文。

一边改，一边看结果

输入 CSS 时，上方预览会同步更新。你看到的就是实际字幕的结构，不用每改一次都保存，也不用在设置页和视频标签之间来回切换。

编辑器提供语法高亮和校验。CSS 正确时会明确提示；如果存在语法错误，或样式表超过长度限制，保存前就会拦住。保存仍然需要手动确认，写到一半的尝试不会意外变成正式字幕样式。

原来的样式设置不会失效。自定义 CSS 会叠加在你选择的字体、大小、粗细、颜色和背景透明度之上；需要覆盖它们时，也不用额外写 !important。

三个选择器，覆盖整块字幕

只需要记住三个类名：

例如，「模糊译文」预设其实就是下面这段 CSS：

.subtitles-translation {
  filter: blur(6px);
  transition: filter 0.15s ease;
}

.subtitles-translation:hover {
  filter: none;
}

样式表只运行在陪读蛙的字幕层内部，不会误改播放器周围的 YouTube 页面。预览和真实字幕使用相同的隔离边界与类名结构，因此预览里能用的选择器，放到视频里会得到一致效果。

怎么使用

1. 打开陪读蛙设置 → 视频字幕 → 字幕样式。
2. 在样式页底部进入自定义 CSS。
3. 选择一个预设，或看着预览编写自己的 CSS。
4. 校验通过后，点击保存。

字幕自定义 CSS 已在陪读蛙 1.46.5 中上线。浏览器完成扩展更新后，不需要再开启其他开关。