字幕也能寫 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 中上線。瀏覽器完成擴充功能更新後，不需要再開啟其他開關。