譯文樣式

在設定裡開啟網頁翻譯 → 翻譯顯示樣式，改動會實時顯示在預覽裡。

預設樣式

樣式	效果
無	普通文字，和原文一樣
文字顏色	譯文用強調色顯示（預設）
背景	譯文後面有淺色底
弱化	譯文比原文顏色淺
模糊效果	滑鼠移上去才清晰，方便自測
引用	左側一條豎線，像引用
虛線	譯文下面有虛線
邊框	譯文外面有一圈細框

自訂 CSS

開啟使用自訂 CSS 樣式，在編輯器裡寫 CSS。譯文元素帶有屬性 data-read-frog-custom-translation-style="custom"，所以規則以這個選擇器開頭：

[data-read-frog-custom-translation-style='custom'] {
  color: #414535;
  background-color: light-dark(#f2e3bc, #c19875);
  padding: 2px 4px;
  border-radius: 4px;
}

編輯器會邊寫邊檢查 CSS，點儲存生效。任何 CSS 都可以用，包括字型、過渡和動畫。

幾個例子

譯文先模糊，滑鼠移上去才顯示：

[data-read-frog-custom-translation-style='custom'] {
  filter: blur(5px);
  transition: filter 0.2s;
}

[data-read-frog-custom-translation-style='custom']:hover {
  filter: none;
}

利用譯文帶的 lang 屬性，給某種語言換字型：

[data-read-frog-custom-translation-style='custom']:lang(ja) {
  font-family: "Hiragino Mincho ProN", serif;
}

light-dark() 在淺色頁面用第一個顏色，在深色頁面用第二個，一條規則就能兼顧兩種頁面。